/* ============================================================================
   LUCID DESIGN TOKENS — the single source of truth.

   Every color, size, weight, corner and shadow Lucid is allowed to use lives
   in this one file. Nothing else may invent one.

   WHY THIS FILE EXISTS
   Before it, getlucidai.com carried seven stylesheets between them declaring
   132 different colors, four rival naming schemes for the same three fonts,
   and seventeen different corner roundings. Nothing was wrong on its own; the
   whole simply did not look like one company. A token is a decision made once
   so it stops being re-made badly.

   THE ONE RULE
   A raw color, a raw corner radius or a raw shadow written anywhere other
   than this file is a bug, and check-brand.mjs fails the build over it. If a
   design genuinely needs a value that is not here, the value gets added here,
   with a name and a job — it does not get typed inline.

   Every token here is declared twice: once for a light screen, once inside
   the `prefers-color-scheme: dark` block. Add a new one to BOTH places.
   ========================================================================= */

:root {
  /* Follow whatever the reader's device is set to. This also flips native
     form controls, scrollbars and the browser's own page canvas, so nothing
     is left stranded on a white ground in dark mode. */
  color-scheme: light dark;

  /* ── COLOR ──────────────────────────────────────────────────────────────
     Six names. Each has one job. The discipline is the point: the reference
     page Lucid is measured against uses eleven colors on the entire page, and
     that restraint is most of why it reads as considered.

     The ground is warm (#FDFCFA), never #FFFFFF. Pure white is a blank
     document; warm paper is a made object. It is the cheapest single thing
     that separates Lucid from a default template.                          */

  --paper:        #fdfcfa;   /* the ground everything sits on               */
  --shelf:        #f7f5f1;   /* a raised surface: card, panel, code strip   */
  --surface:      #ffffff;   /* a surface lifted clear OFF the page         */
  --ink:          #18181b;   /* headings, and "a person owns this step"     */
  --signal:       #fc5f2b;   /* THE accent, and "the system runs this"      */
  --clay:         #c2704a;   /* the second mark: feedback, returning paths  */

  /* The text ladder. Three steps, no more. A fourth gray is how a page stops
     having a hierarchy and starts having a fog. */
  --text-1:       #18181b;   /* headings and anything that must be read     */
  --text-2:       #3f3f46;   /* body copy                                   */
  --text-3:       #71717a;   /* captions, labels, things read second        */

  /* Signal, at the strengths it is allowed to appear in. Orange is loud; it
     earns its loudness by being rare, so these dilutions exist to stop
     anyone reaching for a second accent hue. */
  --signal-press: #e8541f;   /* the pressed/active state of a signal control */
  --signal-lift:  #ff7a4d;   /* signal on a dark ground, where it must lift  */
  --signal-glow:  rgba(252, 95, 43, 0.12);  /* a bloom, a focus ring         */
  --signal-wash:  rgba(252, 95, 43, 0.06);  /* a tinted row or callout       */
  --clay-wash:    rgba(194, 112, 74, 0.08);

  /* Lines. A hairline is a boundary, not a decoration — it is what stops a
     shadow reading as a smudge. */
  --rule:         #e8e4dc;
  --rule-strong:  #d4cfc4;
  --rule-signal:  rgba(252, 95, 43, 0.25);

  /* ── TYPE ───────────────────────────────────────────────────────────────
     Three faces, three jobs, and no fourth. Never introduce Inter, Roboto,
     Arial, system-ui or Space Grotesk — a stray system font is the single
     most common way an on-brand asset starts looking generic.              */

  --font-display: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-body:    'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* The serif is an INSTRUMENT, not a font choice. It appears in italic, on
     exactly one phrase per view — the phrase carrying the meaning of the
     whole page. Used twice it stops meaning anything. See .lucid-emphasis. */
  --font-serif:   'Instrument Serif', 'Iowan Old Style', Palatino, Georgia, serif;

  /* The mono face carries every structural label, legend, unit and number.
     This is a deliberate risk: it makes a Lucid artifact read like an
     instrument panel rather than a brochure, which is right for a company
     whose product is measuring repeating work. */
  --font-mono:    'IBM Plex Mono', 'SF Mono', 'Fira Code', ui-monospace, monospace;

  /* The type scale. Fixed steps, each fluid between a phone and a desktop, so
     nothing has to guess a font-size. Display sizes tighten as they grow —
     large type set at normal tracking looks loose and amateur. */
  --t-display:  clamp(2.25rem, 1.30rem + 4.20vw, 4.25rem);  /* the one headline per view */
  --t-title:    clamp(1.75rem, 1.20rem + 2.45vw, 3.00rem);  /* section titles            */
  --t-heading:  clamp(1.30rem, 1.10rem + 0.90vw, 1.75rem);  /* card and block headings   */
  --t-lead:     clamp(1.06rem, 0.99rem + 0.32vw, 1.25rem);  /* the deck under a title    */
  --t-body:     1rem;
  --t-small:    0.875rem;
  --t-label:    0.6875rem;                                  /* mono, uppercase, tracked  */

  --lh-display: 1.04;
  --lh-title:   1.10;
  --lh-body:    1.60;   /* body copy needs air; headings do not */

  --ls-display: -0.035em;
  --ls-title:   -0.025em;
  --ls-body:    -0.005em;
  --ls-label:   0.16em;  /* mono labels are tracked WIDE, always uppercase */

  --w-regular:  400;
  --w-medium:   500;
  --w-semibold: 600;
  --w-bold:     700;
  --w-display:  800;   /* the display weight, reserved for --t-display/--t-title */

  /* ── SPACE ──────────────────────────────────────────────────────────────
     A 4px base. Only these steps exist. Space is the luxury signal: if a
     section feels too empty it is usually correct.                         */

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

  --section-y: clamp(4rem, 2.5rem + 6vw, 7.5rem);  /* the gap between sections */
  --measure:   1140px;                             /* the content column       */
  --measure-text: 68ch;                            /* the widest a paragraph goes */

  /* ── CORNERS ────────────────────────────────────────────────────────────
     Four values, each with a job. Mixed radii are what make a page read as
     assembled from parts rather than designed.                             */

  --r-mark:    3px;     /* legend swatches, tags, the spine itself */
  --r-control: 8px;     /* buttons, inputs, small controls        */
  --r-surface: 12px;    /* cards, panels, anything holding content */
  --r-pill:    999px;   /* pills and round things                  */

  /* ── DEPTH ──────────────────────────────────────────────────────────────
     Three levels. Shadows are large, soft and faint — a pool of light under
     a floating object, never a tight dark rim. Every shadow is paired with a
     hairline, or the surface has no edge and reads as a blur.              */

  --e-flat:     0 0 0 1px var(--rule);
  --e-raised:   0 1px 2px rgba(24, 24, 27, 0.04),
                0 8px 24px -12px rgba(24, 24, 27, 0.10);
  --e-floating: 0 2px 4px rgba(24, 24, 27, 0.04),
                0 28px 70px -28px rgba(24, 24, 27, 0.22);
  --e-signal:   0 2px 8px rgba(252, 95, 43, 0.35);  /* only on a signal control */

  /* ── MOTION ─────────────────────────────────────────────────────────────
     One curve, three durations. The curve is a deceleration: most of the
     distance covered at once, then settling into place, which is how a real
     object comes to rest. ease-in-out reads mechanical; a spring reads as a
     toy. If only one number here is remembered, it is this curve.          */

  --ease:       cubic-bezier(0.16, 1, 0.3, 1);
  --d-entrance: 620ms;   /* content arriving on scroll */
  --d-response: 420ms;   /* a surface answering the pointer */
  --d-state:    180ms;   /* a color or border changing */
  --travel:     22px;    /* how far content rises as it arrives */
  --lift:       3px;     /* how far a surface rises toward the pointer */
  --stagger:    90ms;    /* the gap between siblings arriving */
}

/* ── DARK ──────────────────────────────────────────────────────────────────
   Not an inversion. The ground goes to a near-black carrying a trace of warm,
   never #000, because a true black flattens everything on it. Signal shifts
   one step brighter so it still lifts off a dark ground, and the hairlines
   become light-on-dark at the same faintness.                              */

@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    --paper:        #0f0f11;
    --shelf:        #17171a;
    --surface:      #1c1c20;
    --ink:          #fafaf9;
    --signal:       #ff7a4d;
    --clay:         #d08a63;

    --text-1:       #fafaf9;
    --text-2:       #d4d4d8;
    --text-3:       #a1a1aa;

    --signal-press: #fc5f2b;
    --signal-lift:  #ff9670;
    --signal-glow:  rgba(255, 122, 77, 0.16);
    --signal-wash:  rgba(255, 122, 77, 0.08);
    --clay-wash:    rgba(208, 138, 99, 0.10);

    --rule:         #2a2a2f;
    --rule-strong:  #3f3f46;
    --rule-signal:  rgba(255, 122, 77, 0.30);

    --e-raised:     0 1px 2px rgba(0, 0, 0, 0.40),
                    0 8px 24px -12px rgba(0, 0, 0, 0.70);
    --e-floating:   0 2px 4px rgba(0, 0, 0, 0.40),
                    0 28px 70px -28px rgba(0, 0, 0, 0.90);
    --e-signal:     0 2px 8px rgba(255, 122, 77, 0.35);
  }
}

/* The explicit toggle wins in both directions, so a reader who has chosen a
   theme keeps it regardless of what their operating system says. */
:root[data-theme='dark'] {
  --paper:        #0f0f11;
  --shelf:        #17171a;
  --surface:      #1c1c20;
  --ink:          #fafaf9;
  --signal:       #ff7a4d;
  --clay:         #d08a63;

  --text-1:       #fafaf9;
  --text-2:       #d4d4d8;
  --text-3:       #a1a1aa;

  --signal-press: #fc5f2b;
  --signal-lift:  #ff9670;
  --signal-glow:  rgba(255, 122, 77, 0.16);
  --signal-wash:  rgba(255, 122, 77, 0.08);
  --clay-wash:    rgba(208, 138, 99, 0.10);

  --rule:         #2a2a2f;
  --rule-strong:  #3f3f46;
  --rule-signal:  rgba(255, 122, 77, 0.30);

  --e-raised:     0 1px 2px rgba(0, 0, 0, 0.40),
                  0 8px 24px -12px rgba(0, 0, 0, 0.70);
  --e-floating:   0 2px 4px rgba(0, 0, 0, 0.40),
                  0 28px 70px -28px rgba(0, 0, 0, 0.90);
  --e-signal:     0 2px 8px rgba(255, 122, 77, 0.35);
}