/**
 * tokens.css — design tokens only.
 * Every colour, radius and shadow used anywhere is defined here.
 */

:root {
  /* ── the FrontWell palette: the website's (frontwell-solutions.com) ──
     The site's colours — its deepest ground, navy #062b3f, teal #28717e,
     aqua #68c7d4, pale aqua — as one ramp of 19 steps, deep to pale. Each
     step keeps the lightness of the step it replaced, so every pairing
     reads as it did: --fw-s10 is the site's teal exactly (5.6:1 on white),
     the shades run to navy and the site's near-black, the tints through
     aqua to its palest wash. The -rgb twins carry the same colour for
     alpha: rgba(var(--fw-s10-rgb), .1). The roles below choose among them. */
  --fw:     #348592;  --fw-rgb:      52, 133, 146;
  --fw-s10: #28717e;  --fw-s10-rgb:  40, 113, 126;
  --fw-s20: #256b79;  --fw-s20-rgb:  37, 107, 121;
  --fw-s30: #1f5d6d;  --fw-s30-rgb:  31,  93, 109;
  --fw-s40: #184f61;  --fw-s40-rgb:  24,  79,  97;
  --fw-s50: #114255;  --fw-s50-rgb:  17,  66,  85;
  --fw-s60: #0a3548;  --fw-s60-rgb:  10,  53,  72;
  --fw-s70: #07273a;  --fw-s70-rgb:   7,  39,  58;
  --fw-s80: #071a27;  --fw-s80-rgb:   7,  26,  39;
  --fw-s90: #040d15;  --fw-s90-rgb:   4,  13,  21;
  --fw-t10: #3c93a1;  --fw-t10-rgb:  60, 147, 161;
  --fw-t20: #47a1af;  --fw-t20-rgb:  71, 161, 175;
  --fw-t30: #53aebc;  --fw-t30-rgb:  83, 174, 188;
  --fw-t40: #5fbcc9;  --fw-t40-rgb:  95, 188, 201;
  --fw-t50: #6fcad6;  --fw-t50-rgb: 111, 202, 214;
  --fw-t60: #8cd6df;  --fw-t60-rgb: 140, 214, 223;
  --fw-t70: #a7e1e7;  --fw-t70-rgb: 167, 225, 231;
  --fw-t80: #c6ebef;  --fw-t80-rgb: 198, 235, 239;
  --fw-t90: #e4f5f7;  --fw-t90-rgb: 228, 245, 247;

  /* the site's own named colours (its :root), for the roles below */
  --fw-ink:   #17202a;   /* headings and body copy */
  --fw-muted: #576574;   /* secondary copy: the site's grey (#627181) a shade deeper, so it holds
                            AA on every wash the app lays under it (5.6:1 on the paper, 5.0 on --tile-2) */
  --fw-paper: #f7f8f5;   /* the page */
  --fw-line:  #dce3df;   /* hairlines and card borders */
  --fw-navy:  #062b3f;   /* the dark sections */
  --fw-gold:  #f1a93b;   /* the site's warm accents: fills and marks only, never type */
  --fw-coral: #e86f51;

  /* ── aqua: the site's call to action ("Start a conversation", "Send an
     enquiry") — #68c7d4, in steps of ten toward white (tints) and navy
     (shades). The name --steel is kept from the old site's blue, whose
     roles it takes: the header's call to action, the band each page opens
     on, the dark panels' second glow, a share of the ambient light. Type
     on it is navy (--steel-ink, 7.5:1); it never carries white type. */
  --steel:     #68c7d4;  --steel-rgb: 104, 199, 212;
  --steel-s10: #5eb7c5;  --steel-s20: #54a8b6;  --steel-s30: #4b98a7;
  --steel-s40: #418998;  --steel-s50: #37798a;  --steel-s60: #2d697b;
  --steel-s70: #235a6c;  --steel-s80: #1a4a5d;  --steel-s90: #103b4e;
  --steel-t10: #77cdd8;  --steel-t20: #86d2dd;  --steel-t30: #95d8e1;
  --steel-t40: #a4dde5;  --steel-t50: #b4e3ea;  --steel-t60: #c3e9ee;
  --steel-t70: #d2eef2;  --steel-t80: #e1f4f6;  --steel-t90: #f0f9fb;
  --steel-ink: var(--fw-navy);          /* type on a --steel fill: 7.5:1 */

  /* surfaces: the site's paper and white, and its pale cool washes for
     the layers set into them (its #edf8fa, #f5f8fa, #e6ece8) */
  --bg: var(--fw-paper);
  --surface: #FFFFFF;
  --tile: #eef5f5;
  --tile-2: #e2eded;

  /* brand */
  --navy: var(--fw-navy);
  --navy-deep: var(--fw-ink);
  --chrome: var(--fw-navy);         /* stays dark in both themes (device chrome, dark panels) */
  --blue: var(--fw-s10);
  --blue-dim: rgba(var(--fw-s10-rgb), 0.10);
  --on-blue: #FFFFFF;                  /* type on a --blue fill: 5.6:1 */

  /* THE WEBSITE'S PALETTE. --blue (the name kept) is the interactive ink:
     the site's teal, so white type on it and it on white both clear 5:1.
     The accent is the ramp's base, a brighter teal: healthy / released /
     done / the batch thread. Red is the one exception, reserved for a
     deviation (an error): the site's coral. */
  --accent: var(--fw);
  --accent-dim: rgba(var(--fw-rgb), 0.12);
  --warn: var(--fw-s20);                     /* notices: a step deeper, still in the family */
  --warn-dim: rgba(var(--fw-s20-rgb), 0.12);
  --red: var(--fw-coral);
  --red-dim: rgba(232, 111, 81, 0.10);

  /* "you are here" and the hosts: a pale brand wash, deep ink */
  --highlight: var(--fw-t70);
  --highlight-ink: var(--fw-s60);

  /* text: the site's ink and its grey (secondary copy at AA on every
     surface); the faintest labels a lighter grey (3.6:1) */
  --text: var(--fw-ink);
  --text-muted: var(--fw-muted);
  --text-faint: #6e7d89;
  --border: var(--fw-line);

  /* shape: the website's corners — 8px on a card or panel, 6px on what
     sits inside one, 5px on a form field; buttons are pills */
  --radius-lg: 8px;
  --radius-md: 6px;
  --radius-sm: 5px;
  --radius-pill: 999px;

  /* elevation — one scale, lit from the same source as the orbit spheres
     (up and to the left), so every shadow falls down and slightly right.
     Each step is a tight contact shadow + a soft ambient one.
       sm   — level 1: resting cards sitting on the page
       md   — level 2: floating panels, the active card, sticky surfaces
       lg   — level 3: things in flight / above content (morph ghost,
              popovers); matches a near orbit sphere's cast shadow
       glow — the "selected / primary" lift; composes with md or lg
     --surface-hi is the lit top edge a raised surface catches.          */
  /* the website's cards sit on one wide, faint shadow (0 22px 70px, 7%);
     the steps keep that softness and add a hairline of contact */
  --shadow-sm:   0 1px 2px rgba(15, 40, 51, 0.05), 0 8px 24px rgba(15, 40, 51, 0.05);
  --shadow-md:   0 1px 2px rgba(15, 40, 51, 0.05), 0 22px 70px rgba(15, 40, 51, 0.07);
  --shadow-lg:   0 2px 4px rgba(15, 40, 51, 0.06), 0 28px 80px rgba(15, 40, 51, 0.16);
  --shadow-glow: 0 0 0 1px rgba(var(--fw-s10-rgb), 0.14), 0 10px 32px -8px rgba(var(--fw-s10-rgb), 0.38);
  --surface-hi:  inset 0 1px 0 rgba(255, 255, 255, 0.75);

  /* type */
  --font: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  /* headings, as on the website: Manrope, with its round full stop */
  --font-display: 'FrontWell Round Period', 'Manrope', 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  /* reserved for data/metric values only (stat tiles, KPI numbers, crumb
     values, batch/run IDs, ROI figures) — never for prose or headings */
  --font-mono: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', Consolas, monospace;
  /* one deliberately oversized display step, used once per page at most
     (the Experience Lab hero) — everything else stays in the existing
     12–42px scale so the display size keeps its impact. Sized so the
     hero's actual copy ("Running on real equipment.") wraps to a clean,
     intentional two-line break rather than one word per line. */
  --display-size: var(--fs-display);

  /* the type scale: one size per role, on every page. Each step is a
     clear jump from the next, so the hierarchy reads at a glance —
     the opener above the chapter, the chapter above its sections. */
  --fs-display: clamp(40px, 4.6vw, 64px);   /* a page's opener: the Home and Lab heroes (64px is the most
                                               "Experience Lab." holds beside the room) */
  --fs-title:   clamp(32px, 3.7vw, 52px);   /* a chapter's title (visit, PLANT, Company) */
  --fs-h2:      clamp(26px, 2.6vw, 38px);   /* a section inside a page (Home) */
  --fs-h3:      clamp(20px, 1.7vw, 24px);   /* a block's title (Pick a station, Our partners) */
  --fs-lead:    clamp(16px, 1.2vw, 18px);   /* the paragraph under a title */
  --fs-kicker:  11px;                       /* the label above a title (the site's: small, uppercase, teal) */

  /* background effects */
  --mesh-a: rgba(var(--fw-s10-rgb), 0.16);
  --mesh-b: rgba(var(--steel-rgb), 0.18);     /* the website's blue, in the room's light */
  --mesh-c: rgba(var(--fw-s10-rgb), 0.08);     /* not red: red is reserved for deviations */
  --grid-dot: rgba(var(--fw-s60-rgb), 0.10);

  /* layout */
  --wrap-max: 1180px;
  --wrap-pad: 28px;

  /* ── motion ──────────────────────────────────────────────────────
     Every transition/animation on the site draws from this set, so the
     whole product moves with one voice and can be re-tuned here.

     easing
       out-expo       — the house curve: fast start, long soft landing.
                        Reveals, page/view changes, anything "arriving".
       out-quart      — calmer sibling of out-expo; hovers, fades,
                        colour changes, carousel settling.
       spring         — overshoots ~6% then settles. Only for small,
                        physical things: press release, magnetic snap-back,
                        badges popping in. Never on large surfaces.
       in-out-smooth  — symmetric; loops that breathe, and travel between
                        two resting points.
       standard       — Material-style standard curve, kept for the orbit
                        bubble so its JS-timed choreography is unchanged.
       linear         — continuous rotation / spinners only.            */
  --ease-out-expo:      cubic-bezier(.16, 1, .3, 1);
  --ease-out-quart:     cubic-bezier(.25, 1, .5, 1);
  --ease-spring:        cubic-bezier(.34, 1.56, .64, 1);
  --ease-in-out-smooth: cubic-bezier(.65, 0, .35, 1);
  --ease-standard:      cubic-bezier(.4, 0, .2, 1);
  --ease-linear:        linear;
  /* spring-physical — a real damped spring (ζ .55, sampled into linear()):
     overshoots ~12% and rings back once. For small physical motions only
     (pins popping in, the batch token, chips). Browsers without linear()
     fall back to the cubic spring above (see the @supports below). */
  --ease-spring-physical: var(--ease-spring);

  /* durations — instant: press feedback · fast: hover/state ·
     base: reveals & view changes · slow: page-level / scroll reveals.
     --dur-fast is also read by main.js transitionPage() so the outgoing
     view's CSS fade and the JS hand-off timer can never drift apart. */
  --dur-instant: 120ms;
  --dur-fast:    180ms;
  --dur-base:    400ms;
  --dur-slow:    600ms;

  /* stagger — the gap between siblings entering in sequence (cards,
     KPI tiles, split-text words, plant nodes). One number sets the
     rhythm of the whole page. */
  --stagger-step: 45ms;

  /* the entrance — mirrors MOTION in js/scroll.js, which writes the live
     values onto :root at load. A CSS rise (.reveal, the planner, the
     library's hook) and a GSAP rise are then the same rise. */
  --reveal-y: 24px;
  --reveal-dur: 900ms;
  --reveal-stagger: 70ms;

  /* skeleton — the sheen that sweeps a media frame while it loads, over
     the same tile gradient the empty ("coming soon") states rest on */
  --shimmer-hi: rgba(255, 255, 255, .62);

  /* glass spheres (partner success orbit) — a light source sitting up
     and to the left of the scene; every sphere is lit from that same
     direction so they read as one physical space */
  --sphere-tint:      rgba(var(--fw-s60-rgb), 0.07);
  --sphere-fill:      rgba(var(--fw-t80-rgb), 0.88);
  --sphere-fill-2:    rgba(var(--fw-t70-rgb), 0.80);
  --sphere-rim:       rgba(var(--fw-s60-rgb), 0.22);
  --sphere-spec:      rgba(255, 255, 255, 0.95);
  --sphere-spec-soft: rgba(255, 255, 255, 0.50);
  --sphere-shade:     rgba(var(--fw-s70-rgb), 0.18);
  --sphere-shadow:    rgba(var(--fw-s70-rgb), 0.26);
  --sphere-halo:      rgba(var(--fw-s10-rgb), 0.10);
  --sphere-glyph:     rgba(var(--fw-s60-rgb), 0.34);
}

@supports (transition-timing-function: linear(0, 1)) {
  :root {
    --ease-spring-physical: linear(0, .047, .164, .319, .488, .651, .796, .915, 1.006, 1.069, 1.107, 1.124,
      1.125, 1.115, 1.097, 1.077, 1.055, 1.036, 1.019, 1.005, .995, .989, .985, .984, .985, .986, .989, .991, 1);
  }
}

/* reduced motion: collapse stagger so nothing waits on a sibling. (base.css
   already zeroes every duration globally; this keeps delays honest too.) */
@media (prefers-reduced-motion: reduce) {
  :root { --stagger-step: 0ms; }
}

[data-theme="dark"] {
  --bg: var(--fw-s90);
  --surface: var(--fw-s80);
  --tile: var(--fw-s70);
  --tile-2: var(--fw-s60);

  --navy: var(--fw-t50);
  --navy-deep: #f5f8fa;
  --chrome: var(--fw-s80);
  --blue: var(--fw-t20);                /* links 6:1 on the dark surfaces */
  --blue-dim: rgba(var(--fw-t20-rgb), 0.14);
  --on-blue: var(--fw-s90);             /* a light fill takes deep type: 6.5:1 (white was 3:1) */

  --accent: var(--fw-t40);
  --accent-dim: rgba(var(--fw-t40-rgb), 0.14);
  --warn: var(--fw-t40);
  --warn-dim: rgba(var(--fw-t40-rgb), 0.14);
  --red: #ff9a80;
  --red-dim: rgba(255, 154, 128, 0.12);

  --text: #e8eef1;                      /* the site's light type on its dark sections */
  --text-muted: #aebdc6;
  --text-faint: #7d919d;
  --border: var(--fw-s60);

  --shadow-sm:   0 1px 2px rgba(0, 0, 0, 0.35), 1px 3px 8px -2px rgba(0, 0, 0, 0.25);
  --shadow-md:   0 1px 2px rgba(0, 0, 0, 0.35), 3px 14px 34px -4px rgba(0, 0, 0, 0.5);
  --shadow-lg:   0 2px 4px rgba(0, 0, 0, 0.4),  6px 26px 52px -8px rgba(0, 0, 0, 0.62);
  --shadow-glow: 0 0 0 1px rgba(var(--fw-t30-rgb), 0.22), 0 10px 32px -8px rgba(var(--fw-t30-rgb), 0.34);
  --surface-hi:  inset 0 1px 0 rgba(255, 255, 255, 0.05);

  --shimmer-hi: rgba(var(--fw-t30-rgb), .16);

  --mesh-a: rgba(var(--fw-t30-rgb), 0.20);
  --mesh-b: rgba(var(--steel-rgb), 0.12);
  --mesh-c: rgba(var(--fw-t30-rgb), 0.10);
  --highlight: var(--fw-s50);
  --highlight-ink: var(--fw-t90);
  --grid-dot: rgba(var(--fw-t30-rgb), 0.10);

  --sphere-tint:      rgba(var(--fw-t50-rgb), 0.07);
  --sphere-fill:      rgba(var(--fw-t20-rgb), 0.18);
  --sphere-fill-2:    rgba(var(--fw-s50-rgb), 0.34);
  --sphere-rim:       rgba(var(--fw-t60-rgb), 0.30);
  --sphere-spec:      rgba(255, 255, 255, 0.80);
  --sphere-spec-soft: rgba(var(--fw-t80-rgb), 0.30);
  --sphere-shade:     rgba(0, 0, 0, 0.38);
  --sphere-shadow:    rgba(0, 0, 0, 0.45);
  --sphere-halo:      rgba(var(--fw-t30-rgb), 0.16);
  --sphere-glyph:     rgba(var(--fw-t80-rgb), 0.34);
}