/* Mirrored from ../../Design System/tokens.css. That file is the source of truth.
   Update it first, then re-copy here. Do not edit this copy by hand. */

/* ============================================================
   Design tokens
   ------------------------------------------------------------
   Two layers, on purpose.

   1. Primitives are raw values. They are named for what they
      are, and nothing outside this file should use them.
   2. Semantic tokens are named for the job they do. Components
      only ever reference these.

   The point of the split is that a value can change in one
   place without hunting through components, and that reading a
   component tells you the intent rather than the hex code.
   ============================================================ */

:root {

  /* --- 1. Primitives --------------------------------------- */

  /* Neutrals, cool cast so the coral stays the only warm thing */
  --c-ink-900:      #0F1113;
  --c-ink-800:      #191C1F;
  --c-ink-700:      #262A2E;
  --c-ink-600:      #3A4147;
  --c-neutral-400:  #90959A;
  --c-neutral-100:  #E9ECEE;

  /* Coral, the primary accent */
  --c-coral-500:    #FF7F50;
  --c-coral-600:    #E86A3D;
  --c-coral-900:    #3D1508;

  /* Teal, the secondary accent */
  --c-teal-500:     #52A799;
  --c-teal-800:     #2A554E;

  /* Type */
  --c-font-sans:    'Instrument Sans', system-ui, -apple-system, sans-serif;
  --c-font-mono:    ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Raw scale, base 8 with a 4 for tight cases */
  --c-space-0:      4px;
  --c-space-1:      8px;
  --c-space-2:      12px;
  --c-space-3:      16px;
  --c-space-4:      24px;
  --c-space-5:      40px;
  --c-space-6:      64px;
  --c-space-7:      104px;


  /* --- 2. Semantic ----------------------------------------- */

  /* Surfaces */
  --bg-page:            var(--c-ink-900);
  --bg-surface:         var(--c-ink-800);
  --bg-accent-subtle:   rgba(255, 127, 80, 0.10);
  --bg-secondary-subtle:rgba(82, 167, 153, 0.10);

  /* Text. Contrast ratios are against --bg-page */
  --text-primary:       var(--c-neutral-100);   /* 16.1 : 1 */
  --text-secondary:     var(--c-neutral-400);   /*  6.3 : 1 */
  --text-accent:        var(--c-coral-500);     /*  7.6 : 1 */
  --text-secondary-accent: var(--c-teal-500);   /*  6.8 : 1 */
  --text-on-accent:     var(--c-coral-900);     /*  6.4 : 1 on coral. Never use white here, it is 2.5 : 1 */

  /* Borders */
  --border-default:     var(--c-ink-700);
  --border-strong:      var(--c-ink-600);
  --border-accent:      var(--c-coral-500);
  --border-secondary:   var(--c-teal-500);

  /* Accents.
     House rule: coral is the constant, teal is the guest.
     Never more than two accents in a single view. */
  --accent-primary:     var(--c-coral-500);
  --accent-primary-hover: var(--c-coral-600);
  --accent-secondary:   var(--c-teal-500);
  --accent-secondary-fill: var(--c-teal-800);

  /* Focus. Always visible, never removed. */
  --focus-ring:         0 0 0 2px var(--bg-page), 0 0 0 4px var(--accent-primary);

  /* Typography */
  --font-sans:          var(--c-font-sans);
  --font-mono:          var(--c-font-mono);

  --text-display:       clamp(44px, 7vw, 84px);
  --text-h1:            40px;
  --text-h2:            28px;
  --text-h3:            20px;
  --text-body:          17px;
  --text-body-lg:       19px;
  --text-small:         14px;
  --text-eyebrow:       12px;

  --leading-tight:      1.05;
  --leading-heading:    1.2;
  --leading-body:       1.6;

  --tracking-tight:     -0.03em;
  --tracking-heading:   -0.02em;
  --tracking-eyebrow:   0.16em;

  --weight-regular:     400;
  --weight-medium:      500;

  /* Space */
  --space-xs:           var(--c-space-0);
  --space-sm:           var(--c-space-1);
  --space-md:           var(--c-space-3);
  --space-lg:           var(--c-space-4);
  --space-xl:           var(--c-space-5);
  --space-2xl:          var(--c-space-6);
  --space-3xl:          var(--c-space-7);

  /* Radius */
  --radius-card:        16px;
  --radius-sm:          10px;
  --radius-pill:        999px;

  /* Elevation. Hairline plus a low shadow, never heavy. */
  --shadow-card:        0 1px 2px rgba(0,0,0,.30);
  --shadow-raised:      0 4px 16px rgba(0,0,0,.35);

  /* Motion */
  --dur-fast:           150ms;
  --dur-base:           250ms;
  --dur-slow:           900ms;   /* the signature straighten, nothing else */
  --ease-out:           cubic-bezier(0.32, 0, 0.16, 1);

  /* Layout */
  --max-content:        1180px;
  /* 50ch, not the 62ch this started as. The ch unit is the width of a
     zero, and Instrument Sans sets much narrower than that on average,
     so 62ch rendered at 85 to 88 characters a line. Measured, not
     estimated: 50ch lands at roughly 69. */
  --max-prose:          50ch;

  /* Logo */
  --logo-threshold:     40px;    /* below this, use the attached construction */
}

/* Anyone who has asked for less movement gets it, everywhere. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 0ms;
    --dur-base: 0ms;
    --dur-slow: 0ms;
  }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}