/* ==========================================================================
   THEATRUM ANIMI — design tokens
   Derived from the TA Brand Guidelines (July 2026). Two brand colours only;
   every other value is a neutral derived from them, or a muted functional state.
   Contrast ratios in the comments are computed, not estimated.
   ========================================================================== */

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

  /* --- ink -------------------------------------------------------------- */
  --color-ink-primary: #3b3737;            /* 10.97:1 on crepito — AAA */
  --color-ink-secondary: #6e6868;          /*  5.10:1 on crepito — AA  */
  --color-ink-muted: #928c8b;              /*  3.09:1 — decorative marks and disabled controls ONLY.
                                              Never for text a sighted user must read. */
  --color-ink-inverse: #f9f7f2;            /* 10.97:1 on rasa    — AAA */
  --color-ink-inverse-secondary: #c9c4be;  /*  6.78:1 on rasa    — AA  */

  /* --- surface ---------------------------------------------------------- */
  --color-surface-page: #f9f7f2;
  --color-surface-raised: #ffffff;
  --color-surface-sunken: #efebe4;
  --color-surface-inverse: #3b3737;
  --color-surface-deep: #1e1b1b;   /* crepito on this = 15.98:1 — AAA */
  --color-ink-hover: #241f1f;      /* primary button hover  */
  --color-ink-active: #151212;     /* primary button active */
  --color-surface-white: #ffffff;  /* inverse button hover  */

  /* --- border ----------------------------------------------------------- */
  --color-border-subtle: #e4e0da;
  --color-border-default: #c9c4be;
  --color-border-strong: #928c8b;  /* 3.09:1 — control boundaries, WCAG 1.4.11 */
  --color-border-inverse: #5e5959;

  /* --- functional states (muted by design) ------------------------------ */
  --color-error: #8e2b20;          /* 7.80:1 on crepito — AAA */
  --color-success: #2c5d3f;        /* 7.15:1 — AAA */
  --color-warning: #7a5314;        /* 6.38:1 — AA  */
  --color-info: #2a4e6e;           /* 8.13:1 — AAA */
  --color-error-surface: #f6e9e7;
  --color-success-surface: #e8efea;
  --color-warning-surface: #f5ede0;
  --color-info-surface: #e7edf3;

  /* --- the visible-grid device ------------------------------------------ */
  --grid-rule-light: rgb(59 55 55 / 8%);
  --grid-rule-dark: rgb(249 247 242 / 14%);
  /* minimum scrim for type over photography — never go below this */
  --scrim: rgb(30 27 27 / 66%);
  --scrim-strong: rgb(30 27 27 / 78%);
  --scrim-poster: rgb(30 27 27 / 45%);      /* video facade  */
  --border-on-photo: rgb(249 247 242 / 30%); /* transparent header rule */

  /* --- type ------------------------------------------------------------- */
  --font-display: "Inter", "Arial", system-ui, sans-serif;
  --font-body: "Noto Serif", "Georgia", serif;
  --font-hand: "Caveat", "Segoe Script", cursive;

  /* fluid scale: min at 320px, max at 1440px */
  --type-display-xl: clamp(3.25rem, 1.2rem + 10.2vw, 7.5rem);   /*  52 → 120 */
  --type-display-lg: clamp(2.5rem, 1.35rem + 5.75vw, 4.5rem);   /*  40 →  72 */
  --type-h1: clamp(2rem, 1.28rem + 3.6vw, 3.5rem);              /*  32 →  56 */
  --type-h2: clamp(1.625rem, 1.2rem + 2.1vw, 2.5rem);           /*  26 →  40 */
  --type-h3: clamp(1.375rem, 1.2rem + 0.86vw, 1.75rem);         /*  22 →  28 */
  --type-h4: clamp(1.1875rem, 1.12rem + 0.34vw, 1.375rem);      /*  19 →  22 */
  --type-h5: 1.125rem;
  --type-eyebrow: 0.8125rem;
  --type-lead: clamp(1.25rem, 1.13rem + 0.6vw, 1.5rem);         /*  20 →  24 */
  --type-body-lg: clamp(1.125rem, 1.06rem + 0.32vw, 1.25rem);   /*  18 →  20 */
  --type-body: clamp(1.0625rem, 1.03rem + 0.16vw, 1.125rem);    /*  17 →  18 */
  --type-body-sm: 1rem;
  --type-meta: 0.875rem;
  --type-caption: 0.8125rem;
  --type-marginalia: clamp(1.375rem, 1.25rem + 0.6vw, 1.5rem);  /*  22 →  24 */

  --lh-display: 0.94;
  --lh-heading: 1.15;
  --lh-prose: 1.7;
  --lh-tight: 1.3;

  --ls-display: -0.03em;
  --ls-h1: -0.021em;
  --ls-h2: -0.015em;
  --ls-eyebrow: 0.14em;
  --ls-nav: 0.06em;

  /* --- space (8px rhythm, 4px half-step) -------------------------------- */
  --space-3xs: 0.25rem;  /*   4 */
  --space-2xs: 0.5rem;   /*   8 */
  --space-xs: 0.75rem;   /*  12 */
  --space-sm: 1rem;      /*  16 */
  --space-md: 1.5rem;    /*  24 */
  --space-lg: 2rem;      /*  32 */
  --space-xl: 2.5rem;    /*  40 */
  --space-2xl: 3rem;     /*  48 */
  --space-3xl: 4rem;     /*  64 */
  --space-4xl: 5rem;     /*  80 */
  --space-5xl: 6rem;     /*  96 */
  --space-6xl: 7.5rem;   /* 120 */

  /* --- shape ------------------------------------------------------------ */
  --radius-none: 0;
  --radius-xs: 2px;
  --radius-sm: 4px;
  --radius-full: 999px;
  --border-hairline: 1px;
  --border-default: 2px;
  --border-rule: 3px;

  /* --- layout ----------------------------------------------------------- */
  --grid-columns: 12;
  --grid-gutter: 1.5rem;   /* 24 */
  --page-margin: 6rem;     /* 96 */
  --content-max: 78rem;    /* 1248 */
  --measure: 40rem;        /* ~65–75 characters of Noto Serif — WCAG 1.4.8 */
  --header-height: 5.5rem; /* 88 */

  /* drawn marks used as CSS masks, so no Unicode glyph stands in for an icon */
  --chevron-right: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9.3 18.3 15.6 12 9.3 5.7 7.6 7.4 12.2 12l-4.6 4.6z'/%3E%3C/svg%3E");

  /* --- motion ----------------------------------------------------------- */
  --ease: cubic-bezier(0.25, 1, 0.5, 1);        /* ease-out-quart */
  --ease-expo: cubic-bezier(0.16, 1, 0.3, 1);   /* ease-out-expo, for the one authored moment */
  --motion-instant: 80ms;
  --motion-fast: 160ms;
  --motion-base: 240ms;
  --motion-slow: 400ms;

  /* --- z-index (semantic; never arbitrary numbers) ---------------------- */
  --z-base: 0;
  --z-raised: 10;
  --z-sticky: 50;
  --z-drawer: 60;
  --z-banner: 70;
  --z-skip-link: 100;

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

@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;
  }
}