/* ==========================================================================
   THEATRUM ANIMI — tokens bridge
   Every custom property of mockup/assets/css/tokens.css, with the mockup
   values. Where theme.json holds the same value as a preset, the property
   aliases the preset, so the editor's palette, sizes and spacing and the
   ported component CSS can never drift apart. Component, theme and ta/*
   block stylesheets use these mockup names verbatim (docs/wp-contract.md).
   ========================================================================== */

:root {
  /* --- brand ------------------------------------------------------------ */
  --color-rasa: var(--wp--preset--color--rasa);       /* #3b3737 RASA    — brand ink     */
  --color-crepito: var(--wp--preset--color--crepito); /* #f9f7f2 CREPITO — brand surface */

  /* --- ink -------------------------------------------------------------- */
  --color-ink-primary: var(--wp--preset--color--rasa);                       /* 10.97:1 on crepito — AAA */
  --color-ink-secondary: var(--wp--preset--color--ink-secondary);            /*  5.10:1 on crepito — AA  */
  --color-ink-muted: var(--wp--preset--color--ink-muted);                    /*  3.09:1 — decorative marks and disabled controls ONLY */
  --color-ink-inverse: var(--wp--preset--color--crepito);                    /* 10.97:1 on rasa    — AAA */
  --color-ink-inverse-secondary: var(--wp--preset--color--ink-inverse-secondary); /* 6.78:1 on rasa — AA */

  /* --- surface ---------------------------------------------------------- */
  --color-surface-page: var(--wp--preset--color--crepito);
  --color-surface-raised: var(--wp--preset--color--surface-raised);
  --color-surface-sunken: var(--wp--preset--color--surface-sunken);
  --color-surface-inverse: var(--wp--preset--color--rasa);
  --color-surface-deep: var(--wp--preset--color--surface-deep);   /* crepito on this = 15.98:1 — AAA */
  --color-ink-hover: var(--wp--preset--color--ink-hover);          /* primary button hover  */
  --color-ink-active: var(--wp--preset--color--ink-active);        /* primary button active */
  --color-surface-white: var(--wp--preset--color--surface-raised); /* inverse button hover  */

  /* --- border ----------------------------------------------------------- */
  --color-border-subtle: var(--wp--preset--color--border-subtle);
  --color-border-default: var(--wp--preset--color--border-default);
  --color-border-strong: var(--wp--preset--color--border-strong); /* 3.09:1 — control boundaries, WCAG 1.4.11 */
  --color-border-inverse: var(--wp--preset--color--border-inverse);

  /* --- functional states (muted by design) ------------------------------ */
  --color-error: var(--wp--preset--color--error);     /* 7.80:1 on crepito — AAA */
  --color-success: var(--wp--preset--color--success); /* 7.15:1 — AAA */
  --color-warning: var(--wp--preset--color--warning); /* 6.38:1 — AA  */
  --color-info: var(--wp--preset--color--info);       /* 8.13:1 — AAA */
  --color-error-surface: var(--wp--preset--color--error-surface);
  --color-success-surface: var(--wp--preset--color--success-surface);
  --color-warning-surface: var(--wp--preset--color--warning-surface);
  --color-info-surface: var(--wp--preset--color--info-surface);

  /* --- the visible-grid device ------------------------------------------ */
  --grid-rule-light: var(--wp--custom--grid-rule--light);
  --grid-rule-dark: var(--wp--custom--grid-rule--dark);
  /* minimum scrim for type over photography — never go below this */
  --scrim: var(--wp--custom--scrim);
  --scrim-strong: var(--wp--custom--scrim-strong);
  --scrim-poster: var(--wp--custom--scrim-poster);       /* video facade  */
  --border-on-photo: var(--wp--custom--border-on-photo); /* transparent header rule */

  /* --- type ------------------------------------------------------------- */
  --font-display: var(--wp--preset--font-family--display);
  --font-body: var(--wp--preset--font-family--body);
  --font-hand: var(--wp--custom--font-hand);

  /* fluid scale: min at 320px, max at 1440px */
  --type-display-xl: var(--wp--preset--font-size--display-xl); /*  52 → 120 */
  --type-display-lg: var(--wp--preset--font-size--display-lg); /*  40 →  72 */
  --type-h1: var(--wp--preset--font-size--h-1);                /*  32 →  56 */
  --type-h2: var(--wp--preset--font-size--h-2);                /*  26 →  40 */
  --type-h3: var(--wp--preset--font-size--h-3);                /*  22 →  28 */
  --type-h4: var(--wp--preset--font-size--h-4);                /*  19 →  22 */
  --type-h5: var(--wp--preset--font-size--h-5);
  --type-eyebrow: var(--wp--preset--font-size--eyebrow);
  --type-lead: var(--wp--preset--font-size--lead);             /*  20 →  24 */
  --type-body-lg: var(--wp--preset--font-size--body-lg);       /*  18 →  20 */
  --type-body: var(--wp--preset--font-size--body);             /*  17 →  18 */
  --type-body-sm: var(--wp--preset--font-size--body-sm);
  --type-meta: var(--wp--preset--font-size--meta);
  --type-caption: var(--wp--preset--font-size--caption);
  --type-marginalia: var(--wp--custom--font-size-marginalia);  /*  22 →  24 */

  --lh-display: var(--wp--custom--line-height--display);
  --lh-heading: var(--wp--custom--line-height--heading);
  --lh-prose: var(--wp--custom--line-height--prose);
  --lh-tight: var(--wp--custom--line-height--tight);

  --ls-display: var(--wp--custom--letter-spacing--display);
  --ls-h1: var(--wp--custom--letter-spacing--h-1);
  --ls-h2: var(--wp--custom--letter-spacing--h-2);
  --ls-eyebrow: var(--wp--custom--letter-spacing--eyebrow);
  --ls-nav: var(--wp--custom--letter-spacing--nav);

  /* --- space (8px rhythm, 4px half-step) -------------------------------- */
  --space-3xs: var(--wp--preset--spacing--3-xs); /*   4 */
  --space-2xs: var(--wp--preset--spacing--2-xs); /*   8 */
  --space-xs: var(--wp--preset--spacing--xs);    /*  12 */
  --space-sm: var(--wp--preset--spacing--sm);    /*  16 */
  --space-md: var(--wp--preset--spacing--md);    /*  24 */
  --space-lg: var(--wp--preset--spacing--lg);    /*  32 */
  --space-xl: var(--wp--preset--spacing--xl);    /*  40 */
  --space-2xl: var(--wp--preset--spacing--2-xl); /*  48 */
  --space-3xl: var(--wp--preset--spacing--3-xl); /*  64 */
  --space-4xl: var(--wp--preset--spacing--4-xl); /*  80 */
  --space-5xl: var(--wp--preset--spacing--5-xl); /*  96 */
  --space-6xl: var(--wp--preset--spacing--6-xl); /* 120 */

  /* --- shape ------------------------------------------------------------ */
  --radius-none: var(--wp--custom--radius--none);
  --radius-xs: var(--wp--custom--radius--xs);
  --radius-sm: var(--wp--custom--radius--sm);
  --radius-full: var(--wp--custom--radius--full);
  --border-hairline: var(--wp--custom--border-width--hairline);
  --border-default: var(--wp--custom--border-width--default);
  --border-rule: var(--wp--custom--border-width--rule);

  /* --- layout ----------------------------------------------------------- */
  --grid-columns: var(--wp--custom--grid--columns);
  --grid-gutter: var(--wp--custom--grid--gutter);     /* 24 */
  --page-margin: var(--wp--custom--page-margin);      /* 96 */
  --content-max: var(--wp--custom--content-max);      /* 1248 */
  --measure: var(--wp--custom--measure);              /* 78rem full-container maximum */
  --header-height: var(--wp--custom--header-height);  /* 88 */

  /* drawn marks used as CSS masks, so no Unicode glyph stands in for an icon */
  --chevron-right: var(--wp--custom--chevron-right);

  /* --- motion ----------------------------------------------------------- */
  --ease: var(--wp--custom--ease--default);    /* ease-out-quart */
  --ease-expo: var(--wp--custom--ease--expo);  /* ease-out-expo, for the one authored moment */
  --motion-instant: var(--wp--custom--motion--instant);
  --motion-fast: var(--wp--custom--motion--fast);
  --motion-base: var(--wp--custom--motion--base);
  --motion-slow: var(--wp--custom--motion--slow);

  /* --- z-index (semantic; never arbitrary numbers) ---------------------- */
  --z-base: var(--wp--custom--z--base);
  --z-raised: var(--wp--custom--z--raised);
  --z-sticky: var(--wp--custom--z--sticky);
  --z-drawer: var(--wp--custom--z--drawer);
  --z-banner: var(--wp--custom--z--banner);
  --z-skip-link: var(--wp--custom--z--skip-link);

  /* --- focus (dual-tone: survives light, dark and photographic surfaces) - */
  --focus-ring: var(--color-rasa);
  --focus-separator: var(--color-crepito);
  --focus-width: var(--wp--custom--focus--width);
  --focus-offset: var(--wp--custom--focus--offset);
}

/* The breakpoint overrides set literal values, like the mockup, because the
   presets above are fixed at their desktop value. */
@media (max-width: 63.99em) {
  :root {
    --page-margin: 2.5rem; /* 40 */
    --grid-columns: 8;
    --header-height: 4rem;
  }
}

@media (max-width: 47.99em) {
  :root {
    --page-margin: 1.25rem; /* 20 */
    --grid-columns: 4;
    --grid-gutter: 1rem;    /* 16 */
  }
}

/* Dark surfaces flip the focus ring so it never needs recolouring by hand. */
.is-inverse,
.band--inverse,
.band--deep,
.hero {
  --focus-ring: var(--color-crepito);
  --focus-separator: var(--color-rasa);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --motion-instant: 1ms;
    --motion-fast: 1ms;
    --motion-base: 1ms;
    --motion-slow: 1ms;
  }
}

/* --- WordPress ---------------------------------------------------------------
   theme.json leaves the root block gap empty, which keeps core's flow-layout
   margins off the mockup's own spacing but prints an empty
   --wp--style--block-gap. Core block styles that read it, and the flex and
   grid default in layout.css, get a real value here. */
:root { --wp--style--block-gap: var(--space-md); }