/* =====================================================================
   CloudNuance — Design Tokens (v4)
   Light-first system. Source of truth: CloudNuance Brand Book V1
   + CloudNuance-Web-Styling-Spec.md.
   Import this file FIRST; reference variables — never hardcode hex.
   Font: Lato 400 / 700 / 900 (Google Fonts).
   ===================================================================== */

:root {
  /* ---------- Hero colors (the only five) ---------- */
  --cn-navy:  #0D173D;  /* primary ink: body, headlines, dark feature bands */
  --cn-cyan:  #24BFF2;  /* signal: accents, CTAs (as text: on Navy only)    */
  --cn-clay:  #C88E6A;  /* warmth: support, decorative (as text: deep-clay)  */
  --cn-paper: #FBFAF7;  /* primary light canvas                              */
  --cn-white: #FFFFFF;  /* card / fallback canvas                            */

  /* ---------- Working ink (accessible text on light) ---------- */
  --cn-deep-cyan: #076381;  /* links / interactive text on Paper or White */
  --cn-deep-clay: #A3643C;  /* eyebrows / secondary labels on Paper/White */

  /* ---------- Navy scale: Navy @ opacity on Paper (light-canvas UI) ---------- */
  --cn-navy-05: #EFEEED;  /* 5%  — subtle section fills, zebra stripes  */
  --cn-navy-10: #E3E3E4;  /* 10% — card fills, hairline backgrounds     */
  --cn-navy-20: #CBCCD1;  /* 20% — borders, dividers                    */
  --cn-navy-40: #9B9FAC;  /* 40% — disabled, placeholder, muted meta    */

  /* ---------- Paper scale: Paper @ opacity on Navy (dark-canvas UI) ---------- */
  --cn-paper-05: #182246;  /* 5%  — raised panels on Navy        */
  --cn-paper-10: #242D4F;  /* 10% — card fills on Navy           */
  --cn-paper-20: #3C4462;  /* 20% — borders / dividers on Navy   */
  --cn-paper-40: #6C7187;  /* 40% — muted text / icons on Navy   */

  /* ---------- Semantic aliases ---------- */
  --cn-bg:            var(--cn-paper);
  --cn-bg-alt:        var(--cn-navy-05);
  --cn-surface:       var(--cn-white);
  --cn-bg-invert:     var(--cn-navy);
  --cn-text:          var(--cn-navy);
  --cn-text-muted:    var(--cn-navy-40);
  --cn-text-invert:   var(--cn-paper);
  --cn-link:          var(--cn-deep-cyan);   /* on light */
  --cn-link-invert:   var(--cn-cyan);        /* on navy  */
  --cn-eyebrow:       var(--cn-deep-clay);   /* on light */
  --cn-border:        var(--cn-navy-20);
  --cn-border-soft:   var(--cn-navy-10);
  --cn-border-invert: var(--cn-paper-20);
  --cn-focus:         var(--cn-cyan);

  /* ---------- Typography ---------- */
  --cn-font: 'Lato', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
             Helvetica, Arial, sans-serif;
  --cn-fw-regular: 400;
  --cn-fw-bold:    700;
  --cn-fw-black:   900;

  /* Fluid type sizes (min → max) — spec §4.2 */
  --cn-size-title:    clamp(2.5rem, 6vw, 4.5rem);     /* 40 → 72px  H1 / Title   */
  --cn-size-header:   clamp(2rem, 4.5vw, 3.25rem);    /* 32 → 52px  H2 / Header   */
  --cn-size-subtitle: clamp(1.5rem, 3vw, 2.25rem);    /* 24 → 36px  H3 / Subtitle */
  --cn-size-body:     1rem;                           /* 16px       Body          */
  --cn-size-eyebrow:  0.6875rem;                      /* 11px       Eyebrow       */

  /* Tracking (letter-spacing) */
  --cn-track-title:    -0.02em;
  --cn-track-header:   -0.015em;
  --cn-track-subtitle: -0.01em;
  --cn-track-body:     0;
  --cn-track-eyebrow:  -0.04em;  /* small-caps; if uppercase, use +0.08em */

  /* Line-height */
  --cn-leading-title:    1.11;
  --cn-leading-header:   1.15;
  --cn-leading-subtitle: 1.22;
  --cn-leading-body:     1.55;  /* web adaptation for long copy (book: 1.24) */
  --cn-leading-tight:    1.24;  /* book value: UI strings, captions, labels  */

  /* ---------- Spacing (8px base) ---------- */
  --cn-space-1: 4px;
  --cn-space-2: 8px;
  --cn-space-3: 12px;
  --cn-space-4: 16px;
  --cn-space-5: 24px;
  --cn-space-6: 32px;
  --cn-space-7: 48px;
  --cn-space-8: 64px;
  --cn-space-9: 96px;
  --cn-space-10: 128px;

  /* ---------- Layout ---------- */
  --cn-container: 1200px;
  --cn-measure: 72ch;
  --cn-gutter: var(--cn-space-5);

  /* ---------- Radius ---------- */
  --cn-radius-sm: 8px;
  --cn-radius-md: 14px;
  --cn-radius-lg: 24px;
  --cn-radius-pill: 999px;

  /* ---------- Elevation (Navy-tinted, no black) ---------- */
  --cn-shadow-sm: 0 1px 2px rgba(13, 23, 61, 0.06);
  --cn-shadow-md: 0 6px 20px rgba(13, 23, 61, 0.08);
  --cn-shadow-lg: 0 18px 48px rgba(13, 23, 61, 0.12);

  /* ---------- Cyan glow (NAVY BANDS ONLY) ---------- */
  --cn-glow-cyan: 0 0 0 1px rgba(36, 191, 242, 0.4),
                  0 8px 32px rgba(36, 191, 242, 0.25);

  /* ---------- Motion ---------- */
  --cn-ease: cubic-bezier(0.4, 0, 0.2, 1);
  --cn-dur-fast: 150ms;
  --cn-dur: 220ms;
}