/* =========================================================
   FLOWSENSE TOKENS.CSS — Single source of truth for all
   shared design values. Load this before every other
   stylesheet on every page.

   AUTHORITATIVE CATEGORIES:
     Colors          — canonical palette + --c-* aliases (this file)
     Typography      — --text-*, --leading-*, --weight-* (this file)
     Spacing         — --space-* (this file)
     Breakpoints     — canonical values documented as comments (this file)
     Containers      — --container-* (this file)
     Section padding — --pad-* (this file)
     Components      — --btn-*, --input-*, --radius-* (this file)

   What lives elsewhere:
     system.css      — layout system, width helpers, section spacing rules
     typography.css  — typography enforcement rules (references --text-*, --leading-*)
     nav.css         — navigation layout and component rules
     modules.css     — reusable UI component rules
   ========================================================= */

:root {
  /* ── Canonical brand palette ── */

  /* Navy family */
  --navy:      #0a1628;
  --navy-deep: #081826;
  --navy-mid:  #0d1b2a;
  --navy-alt:  #111f35;

  /* Teal family */
  --teal:        #0D9E7A;   /* used by index / style.css pages */
  --teal-mid:    #1db87e;   /* used by product / content pages */
  --teal-bright: #11C896;

  /* Orange / Amber */
  --orange: #FF7A1A;
  --amber:  #f59e0b;

  /* White */
  --white: #ffffff;

  /* Neutrals */
  --ink:        #1E2D3D;
  --text:       #1a2638;
  --body-color: #4e5f70;
  --cloud:      #F5F7FA;
  --cloud-warm: #EDF1F5;
  --gray-line:  #D4DCE3;
  --gray-mid:   #6B7B8A;
  --gray-soft:  #9AA8B5;

  /* Borders */
  --border-dark: #1e3a5f;

  /* Alpha */
  --white-soft: rgba(245,247,250,0.88);
  --muted-dark: rgba(245,247,250,0.58);

  /* Signal */
  --signal-amber: #C8862E;
  --signal-rust:  #A85935;

  /* ── --c-* aliases (all point to canonical values above) ── */
  /* Pages using the --c-* convention continue to work without  */
  /* any HTML changes. To change a color, edit only the         */
  /* canonical value above; every alias updates automatically.  */

  --c-dark:         var(--navy);
  --c-dark-2:       var(--navy-mid);
  --c-dark-3:       var(--navy-alt);
  --c-white:        var(--white);
  --c-light:        var(--cloud);
  --c-light-2:      var(--cloud-warm);
  --c-teal:         var(--teal-mid);
  --c-orange:       var(--orange);
  --c-amber:        var(--amber);
  --c-border:       var(--border-dark);
  --c-border-light: var(--gray-line);
  --c-text:         var(--text);
  --c-body:         var(--body-color);
  --c-muted:        var(--gray-mid);
  --c-muted-dark:   var(--muted-dark);
  --c-white-soft:   var(--white-soft);

  /* ─────────────────────────────────────────────────────────
     TYPOGRAPHY SCALE
     Values match the scale enforced in typography.css.
     Use these tokens as the source of truth for font sizes;
     do not hard-code the same pixel values in other files.
     ───────────────────────────────────────────────────────── */

  --text-xs:   0.78rem;    /* 12–13px  — labels, badges, module dividers    */
  --text-sm:   0.875rem;   /* 14px     — copyright, form labels, sub-items  */
  --text-base: 1rem;       /* 16px     — body, buttons, nav links            */
  --text-md:   1.0625rem;  /* 17px     — card body, section sub-text         */
  --text-lg:   1.125rem;   /* 18px     — desktop body, eyebrow pill          */
  --text-xl:   1.375rem;   /* 22px     — card headlines                      */
  --text-2xl:  1.625rem;   /* 26px     — proof-layer shared title            */
  --text-3xl:  clamp(2rem, 3.2vw, 2.5rem);      /* section H2               */
  --text-4xl:  clamp(2.625rem, 5vw, 3.125rem);  /* hero H1                  */

  /* ─────────────────────────────────────────────────────────
     LINE-HEIGHT SCALE
     --lh-* names kept as primary tokens.
     --leading-* provided as semantic aliases.
     ───────────────────────────────────────────────────────── */

  --lh-display:    1.08;   /* Display / Hero headings              */
  --lh-heading:    1.15;   /* Primary headings H1–H2               */
  --lh-subheading: 1.25;   /* Secondary headings H3–H5             */
  --lh-body:       1.60;   /* Body text, paragraphs, descriptions  */
  --lh-small:      1.70;   /* Small text, captions, legal          */
  --lh-ui:         1.40;   /* Navigation and buttons               */

  /* Semantic aliases */
  --leading-tight:   var(--lh-display);     /* 1.08 */
  --leading-normal:  var(--lh-body);        /* 1.60 */
  --leading-relaxed: var(--lh-small);       /* 1.70 */

  /* ─────────────────────────────────────────────────────────
     FONT WEIGHTS
     ───────────────────────────────────────────────────────── */

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

  /* ─────────────────────────────────────────────────────────
     SPACING SCALE  (8px base, consistent multiplier)
     --space-N = N × 8px
     ───────────────────────────────────────────────────────── */

  --space-1:   8px;
  --space-2:   16px;
  --space-3:   24px;
  --space-4:   32px;
  --space-6:   48px;
  --space-8:   64px;
  --space-12:  96px;
  --space-16: 128px;

  /* ─────────────────────────────────────────────────────────
     BREAKPOINTS
     CSS custom properties cannot be used inside @media queries.
     These values are documented here as the canonical reference
     so every file knows the shared breakpoint set.
     When editing a media query, use only the values below.

       --bp-sm:  600px   (mobile → tablet transition)
       --bp-md:  768px   (gutter and font-size step)
       --bp-lg:  1024px  (gutter step)
       --bp-xl:  1060px  (desktop navigation threshold; content sections)
       --bp-2xl: 1280px  (full content-max width)
       --bp-max: 1600px  (ultra-wide breathing room)
     ───────────────────────────────────────────────────────── */

  /* ─────────────────────────────────────────────────────────
     CONTAINER WIDTHS
     ───────────────────────────────────────────────────────── */

  --container-max:    1280px;   /* primary content column width     */
  --container-narrow:  720px;   /* narrative / reading column width  */

  /* ─────────────────────────────────────────────────────────
     SECTION PADDING TOKENS
     Authoritative definitions — system.css and typography.css
     reference these; neither file re-defines them.
     ───────────────────────────────────────────────────────── */

  --pad-hero:         10.25rem 0 8.25rem;   /* Hero — desktop                  */
  --pad-major:         9.25rem 0;           /* Primary content sections         */
  --pad-supporting:    8.25rem 0;           /* Lighter / supporting sections    */
  --pad-mobile-hero:   7.75rem 0 6.25rem;  /* Hero — tablet and below          */
  --pad-mobile-major:  6.75rem 0;          /* Major sections — tablet and below */

  /* ─────────────────────────────────────────────────────────
     BORDER RADII
     ───────────────────────────────────────────────────────── */

  --radius-sm:   4px;     /* buttons, form controls, small tags     */
  --radius-md:   8px;     /* icon tiles, small cards                */
  --radius-lg:   14px;    /* process steps, shift cards, panels     */
  --radius-pill: 999px;   /* eyebrow pills, chip badges             */

  /* ─────────────────────────────────────────────────────────
     BUTTON DIMENSIONS
     ───────────────────────────────────────────────────────── */

  --btn-height-sm:  32px;
  --btn-height-md:  40px;    /* matches .nav-btn height */
  --btn-height-lg:  52px;    /* primary CTA / .btn height */
  --btn-radius:     var(--radius-sm);   /* 4px */

  /* ─────────────────────────────────────────────────────────
     FORM CONTROL DIMENSIONS
     ───────────────────────────────────────────────────────── */

  --input-height: 2.8rem;   /* matches 0.8rem top/bottom padding + 1rem line-height */
  --input-radius: var(--radius-sm);   /* 4px */
}