/* ============================================================
   Remyt brand tokens — the shared closure for every page.

   SOURCE OF TRUTH: the shared design-system token package, as of
   2026-09-03. This file is a PORT of it. Edit the master, then re-port;
   a change made only here is one the next port silently reverts. The
   repo notes carry the location — deliberately not named in this file,
   which ships publicly.

   The master is plain CSS custom properties, like this file, and it
   declares its own @font-face rules. So the port is close to a copy.
   It differs in exactly two ways:

     1. Font paths. The master expects ../fonts/ relative to itself;
        this file serves them from /assets/fonts/.
     2. The LEGACY alias block below, which is site-only and is not
        carried upstream.

   HISTORY, not instruction: the lineage runs theme.css (2026-08-26,
   finalized 2026-08-27, Tailwind v4) → ported to plain CSS for this
   site 2026-08-27, unwrapping @theme into :root and dropping the bare
   @import, because this site has no build step and a browser drops
   unknown at-rules → grown here through 2026-09-02 → promoted out of
   this file to become the master on 2026-09-03. The unwrapping is done
   and will not need doing again; it is recorded because it explains why
   the master is plain CSS rather than the Tailwind form.

   The LEGACY block at the bottom maps the previous token names the
   existing pages still consume onto this system. Delete entries as
   call sites are re-authored; do not write NEW styles against them.

   NOTE: CSS and JS are copied to _site verbatim — the build's comment
   stripper only touches HTML. Comments in this file are readable at
   /assets/css/tokens.css on the live site. Keep internal repo, org and
   system names out of them, and keep positioning rationale out too.

   Every page links this first, then its own stylesheet.
   ============================================================ */

/* Figtree — variable font (weights 300–900). Self-hosted so the build
   stays hermetic; files mirror the layout the previous face used. */
@font-face {
  font-family: "Figtree";
  src: url("/assets/fonts/Figtree-VariableFont_wght.ttf") format("truetype");
  font-weight: 300 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Figtree";
  src: url("/assets/fonts/Figtree-Italic-VariableFont_wght.ttf") format("truetype");
  font-weight: 300 900;
  font-style: italic;
  font-display: swap;
}

/* ---- Raw brand values (unwrapped from the upstream @theme) ------ */
:root {
  /* The two jobs. Teal = it arrived. Ember = it is moving, or you act. */
  --color-arrived: #0A7573;
  --color-arrived-deep: #085D5C;
  --color-arrived-tint: #E4F2F1;

  --color-action: #E04E2A;
  --color-action-hover: #C94523;
  --color-action-active: #B23A1D;
  --color-action-tint: #FCE9E4;

  /* On-dark lifts (from the upstream .dark layer, needed as raw values
     because the marketing pages paint dark bands without a .dark class). */
  --color-arrived-lift: #13A6A0;
  --color-arrived-lift-soft: #7FD8D2;
  --color-action-lift: #F0663F;

  /* Warm neutrals — the only gray family. Cool needs come from
     teal's own hues, never from a second gray. */
  --color-warm-900: #221E19;
  --color-warm-700: #4A463F;
  --color-warm-500: #8A857C;
  --color-warm-300: #C9C0B4;
  --color-warm-100: #E9E4DA;
  --color-warm-50:  #FAF6F1;

  /* Status. Crimson is hue-separated from ember on purpose. */
  --color-danger: #A61B1B;
  --color-warning: #B87514;

  /* Radius ramp. Buttons are pills (9999px), not a ramp step. */
  --radius-chip: 10px;
  --radius-otp: 12px;
  --radius-input: 14px;
  --radius-card: 20px;
  --radius-sheet: 24px;
  --radius-pill: 9999px;

  /* Control heights — the one-language rule made literal. */
  --spacing-control: 56px;
  --spacing-control-pair: 48px;
  --spacing-chip: 28px;

  /* Type */
  --font-sans: "Figtree", ui-sans-serif, system-ui, sans-serif;
  --font-mono: "SF Mono", "Consolas", ui-monospace, monospace;

  /* Motion — settle, don't bounce. */
  --ease-remyt: cubic-bezier(0.65, 0, 0.15, 1);
  --duration-micro: 150ms;
  --duration-standard: 250ms;
  --duration-stepper: 400ms;
  --duration-arrival: 750ms;
  --duration-draw: 900ms;
}

/* ---- Semantic layer: LIGHT (the default surface) ---------------- */
:root {
  --background: var(--color-warm-50);      /* cream page */
  --card: #FFFFFF;                          /* white cards buffer adjacency */
  --foreground: var(--color-warm-900);      /* warm ink */
  --muted-foreground: var(--color-warm-500);
  --border: var(--color-warm-300);          /* warm resting stroke */
  --input: var(--color-warm-300);
  --ring: var(--color-arrived);             /* focus is always teal */

  --arrived: var(--color-arrived);
  --arrived-tint: var(--color-arrived-tint);
  --arrived-foreground: var(--color-arrived-deep);

  --action: var(--color-action);
  --action-tint: var(--color-action-tint);
  --action-foreground: #FFFFFF;

  --destructive: var(--color-danger);
  --warning: var(--color-warning);

  --stroke: 2px;
  --radius: var(--radius-input);
}

/* ---- Semantic layer: DARK --------------------------------------- */
.dark {
  --background: var(--color-warm-900);
  --card: #2B2620;
  --foreground: var(--color-warm-50);
  --muted-foreground: #A29C92;
  --border: var(--color-warm-700);
  --input: var(--color-warm-700);
  --ring: var(--color-arrived-lift);

  --arrived: var(--color-arrived-lift);
  --arrived-tint: #10322F;
  --arrived-foreground: var(--color-arrived-lift-soft);

  --action: var(--color-action-lift);
  --action-tint: #3A1A0F;
  --action-foreground: #FFFFFF;

  --destructive: #E8695F;
  --warning: #D9A03F;
}

/* ---- Semantic layer: COLORED SURFACES --------------------------- */
[data-surface="teal"] {
  --background: var(--color-arrived);
  --card: #FFFFFF;
  --foreground: #FFFFFF;
  --muted-foreground: #B9DEDC;
  --border: #0F8A87;
  --input: #0F8A87;
  --ring: #FFFFFF;

  --arrived: #FFFFFF;
  --arrived-tint: var(--color-arrived-deep);
  --arrived-foreground: var(--color-arrived-deep);

  --action: var(--color-action);
  --action-tint: var(--color-action-tint);
  --action-foreground: #FFFFFF;
}

[data-surface="ember"] {
  --background: var(--color-action);
  --card: #FFFFFF;
  --foreground: #FFFFFF;
  --muted-foreground: #F7CFC2;
  --border: var(--color-action-hover);
  --input: var(--color-action-hover);
  --ring: #FFFFFF;

  --arrived: var(--color-arrived);
  --arrived-tint: var(--color-arrived-tint);
  --arrived-foreground: var(--color-arrived-deep);

  --action: #FFFFFF;
  --action-tint: #FFFFFF;
  --action-foreground: var(--color-action);
}

@media (prefers-reduced-motion: reduce) {
  /* Reduced motion is a designed variant, not an omission.

     ⚠️ The iteration count is the load-bearing line, not the duration. Cutting
     an animation to 0.01ms without also pinning it to a single pass leaves a
     looping animation running roughly a hundred thousand cycles a second —
     a flicker, and a seizure risk, for the one reader who asked for less
     motion. Any `infinite` animation that is not itself inside a
     `no-preference` gate depends entirely on this line. */
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ============================================================
   STATUS GREEN — a deliberate exception, kept by decision.
   The brand palette is teal + ember + warm neutrals and has no
   green. The docs' availability badges are a STATUS signal, not
   decoration, and folding them into teal would make "Live" read
   the same as links and focus rings on the same page. So the
   go/live/passed green survives as a standalone status hue.
   Flagged to the brand system as an open gap.
   ============================================================ */
:root {
  --success-50:  #EDFFF2;
  --success-200: #AEFFCA;
  --success-300: #70FFA2;
  --success-400: #2BFD72;
  --success-600: #00C03C;
  --success-700: #009633;
  --success-800: #06752D;  /* Live badge fill — 5.85:1 on white text */
}

/* ============================================================
   LEGACY COMPATIBILITY — old token names the current pages still
   consume, mapped onto the system above. Radius entries adopt the
   new ramp outright (a deliberate geometry change, decided
   2026-08-27). Delete entries as call sites are re-authored; write
   nothing new against these names.
   ============================================================ */
:root {
  /* Old indigo accent scale → teal. The ACTION slots (.rm-btn,
     .rd-cta) are re-pointed at ember in their own stylesheets and
     do not come through this mapping. */
  --remyt-25:  #F1F8F7;
  --remyt-50:  var(--color-arrived-tint);
  --remyt-100: var(--color-arrived-tint);
  --remyt-200: #B9DEDC;
  --remyt-300: var(--color-arrived-lift-soft);
  --remyt-400: var(--color-arrived-lift);
  --remyt-500: var(--color-arrived);
  --remyt-600: var(--color-arrived);
  --remyt-700: var(--color-arrived-deep);

  /* Contact-form leftovers that never migrated off the previous accent. */
  --brand-300: var(--color-arrived-lift-soft);
  --brand-400: var(--color-arrived-lift);
  --brand-500: var(--color-arrived);

  /* Old cool gray scale → warm. Adjacent steps collapse; the two
     text tiers that mattered are preserved by the aliases below. */
  --gray-50:  var(--color-warm-50);
  --gray-100: var(--color-warm-100);
  --gray-300: var(--color-warm-300);
  --gray-400: var(--color-warm-500);
  --gray-500: var(--color-warm-500);
  --gray-600: var(--color-warm-700);
  --gray-700: var(--color-warm-700);
  --gray-800: var(--color-warm-900);
  --gray-900: var(--color-warm-900);
  --gray-950: var(--color-warm-900);

  /* Semantic text/surface aliases.
     --text-body was declared TWICE in the old closure — once as a
     color, once as 15px — and the size won the cascade, so
     `color: var(--text-body)` resolved invalid and inherited the
     heading ink. Body copy rendered dark since day one. Declared
     once here, as a color, which fixes it: body text lightens to
     its intended weight. warm-700 (8.5:1 on cream), not warm-500,
     which fails AA at body sizes. */
  --text-heading:  var(--color-warm-900);
  --text-body:     var(--color-warm-700);
  --text-strong:   var(--color-warm-700);
  --text-muted:    var(--color-warm-500);
  --surface-page:  var(--background);
  --surface-muted: var(--color-warm-100);
  --surface-dark:  var(--color-warm-900);
  --border-default: var(--border);
  --border-strong:  var(--color-warm-300);

  /* Status + focus. Focus keeps the single-soft-shadow recipe the
     components were built on; the hue is the system's (teal). */
  --error-300: var(--color-danger);
  --error-500: var(--color-danger);
  --error-600: #8F1717;
  --warning-50:  #FAF3E7;
  --warning-200: #E9D3AB;
  --warning-700: var(--color-warning);
  --focus-ring:       0 0 0 3px rgba(10, 117, 115, 0.18);
  --focus-ring-error: 0 0 0 3px rgba(166, 27, 27, 0.12);
  --remyt-focus-ring: 0 0 0 3px rgba(10, 117, 115, 0.18);

  /* Radius — the new ramp, order-preserving. Old 4/6/8/10/12/14/16
     become 10/10/12/14/20/20/24: everything rounds up. */
  --radius-xs:  var(--radius-chip);
  --radius-sm:  var(--radius-chip);
  --radius-md:  var(--radius-otp);
  --radius-lg:  var(--radius-input);
  --radius-xl:  var(--radius-card);
  --radius-2xl: var(--radius-card);
  --radius-3xl: var(--radius-sheet);
  --radius-full: var(--radius-pill);

  /* Type sizes/tracking still consumed by the old pages. The
     tracking values were tuned for the previous face and may want
     a by-eye pass under Figtree. */
  --text-small: 13px;
  --text-micro: 12px;
  --text-body-sm: 14px;
  --tracking-heading: -0.025em;
  --tracking-tight: -0.02em;
  --tracking-label: 0.06em;

  /* On-dark gradients, re-derived teal-for-indigo. */
  --gradient-remyt-text: linear-gradient(135deg, var(--color-arrived-lift), var(--color-arrived-lift-soft));
  --gradient-remyt-hero: radial-gradient(ellipse 80% 50% at 50% 30%, rgba(19, 166, 160, 0.12), transparent 70%),
                         linear-gradient(180deg, var(--color-warm-900) 0%, #10322F 50%, #14504D 100%);
}