/* ==========================================================================
   REXSA — design tokens
   Shared palette primitives, with semantic roles for each application surface.
   Loaded by BOTH the public site (rexsa.css) and the admin panel (style.css),
   so both surfaces preserve the same brand colors.

   Colour identity is the REXSACODE palette from REXSACODE_UI_PALETTE.md:
   white canvas, black ink, neutral greys, and #1677D2 reserved for
   interaction. Everything below is either one of those exact values or a
   neutral/state derivative of them — no new hues.
   ========================================================================== */

:root {
  color-scheme: light;

  /* ---------------------------------------------------------------------- */
  /* 1. Palette primitives — the fixed REXSACODE values                     */
  /* ---------------------------------------------------------------------- */
  --rexsa-canvas: #ffffff;
  --rexsa-ink: #000000;
  --rexsa-near-black: #101010;
  --rexsa-text-secondary: #303030;
  --rexsa-text-disabled: #505050;
  --rexsa-surface-soft: #f2f2f2;
  --rexsa-control-surface: #f5f5f5;
  --rexsa-badge-surface: #e8e8e8;
  --rexsa-border-subtle: #d8d8d8;
  --rexsa-action: #1677d2;
  --rexsa-on-action: #ffffff;

  /* Mid grey for large ordinal numerals: subordinate to the text it indexes,
     but still 3.3:1 on white, so it is legible rather than a ghost. */
  --rexsa-grey-mid: #8d8d8d;

  /* Neutral tint used only to separate a band of page from the one above it,
     so sections get rhythm without being boxed into cards. */
  --rexsa-canvas-subtle: #fafafa;

  /* Interaction derivatives of --rexsa-action (same hue, adjusted for the
     pressed state and for tinted selection where white-on-blue is too heavy). */
  --rexsa-action-pressed: #115fa8;
  --rexsa-action-wash: #eaf2fb;

  /* Semantic state inks, contrast-checked on white. Always paired with a text
     label — colour is never the only signal. */
  --rexsa-ok: #1a6d3a;
  --rexsa-warn: #8a5300;
  --rexsa-danger: #b3261e;

  /* ---------------------------------------------------------------------- */
  /* 2. Semantic colour roles — what components actually reference           */
  /* ---------------------------------------------------------------------- */
  --bg: var(--rexsa-canvas);
  --bg-subtle: var(--rexsa-canvas-subtle);
  --surface: var(--rexsa-canvas);
  --surface-raised: var(--rexsa-control-surface);
  --surface-sunken: var(--rexsa-surface-soft);
  --surface-badge: var(--rexsa-badge-surface);

  --text-primary: var(--rexsa-ink);
  --text-secondary: var(--rexsa-text-secondary);
  --text-muted: var(--rexsa-text-disabled);
  --text-on-accent: var(--rexsa-on-action);
  --text-numeral: var(--rexsa-grey-mid);

  --border: var(--rexsa-border-subtle);
  --border-strong: var(--rexsa-near-black);

  --accent: var(--rexsa-action);
  --accent-pressed: var(--rexsa-action-pressed);
  --accent-wash: var(--rexsa-action-wash);
  --focus: var(--rexsa-action);

  --success: var(--rexsa-ok);
  --warning: var(--rexsa-warn);
  --error: var(--rexsa-danger);

  /* ---------------------------------------------------------------------- */
  /* 3. Type                                                                */
  /* Archivo carries language; the mono face carries machine values —        */
  /* keys, IDs, prices, versions, durations, statuses, step numbers.         */
  /* ---------------------------------------------------------------------- */
  --font-sans: Archivo, Inter, "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-mono: Consolas, "IBM Plex Mono", ui-monospace, "Cascadia Code", monospace;

  /* Restrained scale. Hierarchy comes from weight, rule lines and space —
     not from oversized display type. */
  --fs-display: clamp(2.125rem, 1.55rem + 2.6vw, 3.25rem);   /* 34 → 52 */
  --fs-h1: clamp(1.75rem, 1.42rem + 1.5vw, 2.375rem);        /* 28 → 38 */
  --fs-h2: clamp(1.375rem, 1.21rem + 0.75vw, 1.75rem);       /* 22 → 28 */
  --fs-h3: 1.125rem;                                          /* 18 */
  --fs-h4: 0.9375rem;                                         /* 15 */
  --fs-body-lg: 1.0625rem;                                    /* 17 */
  --fs-body: 0.9375rem;                                       /* 15 */
  --fs-body-sm: 0.84375rem;                                   /* 13.5 */
  --fs-label: 0.75rem;                                        /* 12 */
  --fs-caption: 0.75rem;                                      /* 12 */

  --lh-display: 1.04;
  --lh-heading: 1.18;
  --lh-snug: 1.4;
  --lh-body: 1.62;

  --tracking-display: -0.022em;
  --tracking-heading: -0.014em;
  --tracking-label: 0.13em;   /* mono uppercase labels */
  --tracking-word: 0.15em;    /* the REXSA wordmark */

  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;

  /* Comfortable reading measure for prose columns. */
  --measure: 68ch;
  --measure-narrow: 54ch;

  /* ---------------------------------------------------------------------- */
  /* 4. Space — 4px base                                                    */
  /* ---------------------------------------------------------------------- */
  --s-1: 0.25rem;   /*  4 */
  --s-2: 0.5rem;    /*  8 */
  --s-3: 0.75rem;   /* 12 */
  --s-4: 1rem;      /* 16 */
  --s-5: 1.5rem;    /* 24 */
  --s-6: 2rem;      /* 32 */
  --s-7: 3rem;      /* 48 */
  --s-8: 4rem;      /* 64 */
  --s-9: 6rem;      /* 96 */
  --s-10: 8rem;     /* 128 */

  /* Vertical rhythm between major page bands. */
  --section-y: clamp(3rem, 2rem + 3vw, 5rem);
  --section-y-tight: clamp(2.25rem, 1.75rem + 2vw, 3.5rem);

  /* ---------------------------------------------------------------------- */
  /* 5. Layout                                                              */
  /* ---------------------------------------------------------------------- */
  --container: 1120px;        /* default content column */
  --container-wide: 1320px;   /* data tables, galleries  */
  --container-text: 760px;    /* legal / editorial       */
  --gutter: clamp(1.25rem, 0.75rem + 2.5vw, 2.5rem);
  --header-h: 60px;
  --grid-gap: clamp(1rem, 0.5rem + 1.5vw, 2rem);

  /* ---------------------------------------------------------------------- */
  /* 6. Radius — deliberately tight. This is an instrument, not a card deck */
  /* ---------------------------------------------------------------------- */
  --r-control: 5px;   /* buttons, inputs, chips  */
  --r-surface: 7px;   /* panels, tables, posters */
  --r-full: 999px;    /* dots and true circles only */

  /* ---------------------------------------------------------------------- */
  /* 7. Elevation — used almost nowhere on purpose. Reserved for layers      */
  /*    that genuinely float above the page (mobile sheet, dialog).          */
  /* ---------------------------------------------------------------------- */
  --shadow-overlay: 0 12px 28px rgba(16, 16, 16, 0.14);
  --scrim: rgba(16, 16, 16, 0.45);

  /* ---------------------------------------------------------------------- */
  /* 8. Motion — short, functional, colour/border only                      */
  /* ---------------------------------------------------------------------- */
  --t-fast: 120ms;
  --t-base: 160ms;
  --ease: cubic-bezier(0.2, 0, 0.2, 1);

  /* ---------------------------------------------------------------------- */
  /* 9. Admin-panel compatibility                                           */
  /* style.css (admin + CMS) was written against these names. Keeping them   */
  /* here means the whole product reads from one token file.                 */
  /* ---------------------------------------------------------------------- */
  --rexsa-font-sans: var(--font-sans);
  --rexsa-font-mono: var(--font-mono);
  --radius: var(--r-surface);
  --radius-sm: var(--r-control);
  --shadow: none;
  --sidebar-w: 250px;

  --bg-elev: var(--surface);
  --bg-card: var(--surface);
  --bg-hover: var(--surface-sunken);
  --border-soft: var(--border);
  --text: var(--text-primary);
  --text-dim: var(--text-secondary);
  --text-mute: var(--text-muted);
  --brand: var(--accent);
  --brand-2: var(--accent);
  --brand-glow: transparent;
  --green: var(--success);
  --amber: var(--warning);
  --red: var(--error);
  --blue: var(--accent);

  font-synthesis: none;
}

/* Legacy admin theme attributes resolve to the light admin roles.
   The rebuilt public site uses the explicit data-design="night" scope below. */
html[data-theme="light"],
html[data-theme="dark"] {
  color-scheme: light;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --t-fast: 0ms;
    --t-base: 0ms;
  }
}

/* Public website: dark semantic roles over the exact REXSACODE primitives.
   The private admin continues to use the light roles above. */
html[data-design="night"] {
  color-scheme: dark;
  --bg: var(--rexsa-ink);
  --bg-subtle: var(--rexsa-near-black);
  --surface: var(--rexsa-near-black);
  --surface-raised: #191919;
  --surface-sunken: var(--rexsa-ink);
  --surface-badge: var(--rexsa-text-secondary);
  --text-primary: var(--rexsa-canvas);
  --text-secondary: #b3b3b3;
  --text-muted: #9a9a9a;
  --border: var(--rexsa-text-secondary);
  --border-strong: var(--rexsa-text-disabled);
  --accent-wash: rgba(22,119,210,.12);
  --focus: #8cbcf0;
  --success: #b3d4be;
  --warning: #e4c38b;
  --error: #f3aaa5;
  --font-sans: Manrope, "Segoe UI", system-ui, sans-serif;
  --font-display: "Space Grotesk", Manrope, sans-serif;
  --font-mono: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  --fs-display: clamp(2.6rem, 1.5rem + 3.3vw, 5.5rem);
  --fs-h1: clamp(2.45rem, 1.5rem + 2.6vw, 4.75rem);
  --fs-h2: clamp(2rem, 1.35rem + 1.7vw, 3.25rem);
  --fs-body: 0.9375rem;
  --fs-body-lg: clamp(1rem, .9rem + .3vw, 1.1875rem);
  --fs-label: .6875rem;
  --tracking-display: -.06em;
  --tracking-heading: -.045em;
  --container: 1320px;
  --container-wide: 1320px;
  --gutter: clamp(1.25rem, 4.5vw, 5.5rem);
  --header-h: 88px;
  --section-y: clamp(4rem, 7vw, 8rem);
  --r-control: 5px;
  --r-surface: 12px;
  --shadow-overlay: 0 24px 100px rgba(0,0,0,.65);
  --scrim: rgba(0,0,0,.8);
  --t-fast: 160ms;
  --t-base: 260ms;
  --t-reveal: 700ms;
  --ease: cubic-bezier(.22,1,.36,1);
  --z-header: 40;
  --z-menu: 45;
  --z-overlay: 100;
}
@media (max-width: 700px) { html[data-design="night"] { --header-h: 72px; } }
@media (prefers-reduced-motion: reduce) { html[data-design="night"] { --t-fast: 0ms; --t-base: 0ms; --t-reveal: 0ms; } }