/* @rlc/ds v1.0.0 · web design tokens · generated 2026-06-13 — DO NOT HAND-EDIT.
   Source of truth: rlc-design-system/src/. Rebuild: npm run build (in the package). */

:root {
  /* ---- Brand colours (core) ------------------------------------------------ */
  --rlc-blue:        #314ccd;   /* PRIMARY — actions, links, focus */
  --rlc-blue-dark:   #1f2bc4;   /* primary hover / deep accent */
  --rlc-orange:      #f46c42;   /* ACCENT — highlights, conversion sparkle */
  --rlc-orange-ink:  #e0552b;   /* orange hover */
  --rlc-lavender:    #ac98ee;
  --rlc-lavender-ink:#6c54c6;   /* AA-dark lavender for text/icons on a lavender tint */
  --rlc-sky:         #bbd2ea;

  /* ---- Extended brandbook accents (shapes + illustration) ------------------ */
  /* Exact hexes taken from the brand shape SVGs in 01_Brand/illustrations. */
  --rlc-pink:        #f4a1f4;   /* orchid pink */
  --rlc-green:       #b1ee8f;   /* light green */
  --rlc-olive:       #c8c831;   /* chartreuse */
  --rlc-forest:      #28453a;   /* dark green (brandbook bar) */
  --rlc-red:         #f0463c;   /* red (brandbook bar) */
  --rlc-peach:       #f2dec9;

  /* ---- Neutrals (exact, from brandbook "Neutral colours") ------------------ */
  --neutral-00:      #403b31;   /* ink — body text */
  --neutral-01:      #615c53;
  --neutral-02:      #848078;
  --neutral-03:      #a59f98;
  --neutral-04:      #eae4dc;
  --neutral-05:      #f4eee9;   /* canvas — warm cream */
  --white:           #ffffff;
  --black:           #15151a;   /* near-black (frames, dark pill buttons) */

  /* ---- Semantic roles ------------------------------------------------------ */
  --color-primary:        var(--rlc-blue);
  --color-primary-hover:  var(--rlc-blue-dark);
  --color-accent:         var(--rlc-orange);
  --color-accent-hover:   var(--rlc-orange-ink);
  /* Error/danger text + borders. Darker than --rlc-red so it clears WCAG AA
     as TEXT on light (5.1:1 on canvas) — orange/orange-ink only hit ~3.3:1. */
  --color-danger:         #c0291f;

  --canvas:        var(--neutral-05);          /* page background */
  --surface:       var(--white);               /* cards, nav, inputs */
  --surface-alt:   var(--neutral-04);          /* subtle fills */
  --text:          var(--neutral-00);
  --text-muted:    rgba(64, 59, 49, 0.82);   /* WCAG AA: ≥4.5:1 on canvas/white/surface-alt */
  --text-faint:    rgba(64, 59, 49, 0.42);
  --on-primary:    #ffffff;
  --border:        rgba(64, 59, 49, 0.12);
  --border-strong: rgba(64, 59, 49, 0.22);

  /* Tints — translucent brand fills (icon chips, pills, current-nav). Single
     source for the rgba()s that were previously inlined across components.css. */
  --primary-a08:   rgba(49, 76, 205, 0.08);    /* nav current-page chip */
  --primary-a10:   rgba(49, 76, 205, 0.10);    /* icon chips, flow nums, blue pills */
  --accent-a12:    rgba(244, 108, 66, 0.12);   /* accent icon chips */
  --lav-a18:       rgba(172, 152, 238, 0.18);  /* lavender icon chips */

  /* On the blue band (text/borders set over --color-primary) */
  --on-primary-muted:  rgba(255, 255, 255, 0.82);  /* lead copy on blue */
  --on-primary-border: rgba(255, 255, 255, 0.60);  /* ghost outline ≥3:1 on blue */
  --on-primary-hover:  rgba(255, 255, 255, 0.12);  /* ghost hover fill on blue */

  /* ---- Typography ---------------------------------------------------------- */
  --font-sans: "Onest", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  /* weight roles — brandbook: Bold headlines / Medium subheads / Light body */
  --fw-light:    300;
  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;
  --fw-xbold:    800;
  --fw-black:    900;

  /* fluid type scale (min, preferred, max) */
  --fs-display: clamp(2.25rem, 0.9rem + 5.6vw, 5.25rem); /* hero h1 */
  --fs-h1:      clamp(2.25rem, 1.4rem + 3.4vw, 3.5rem);
  --fs-h2:      clamp(1.75rem, 1.25rem + 2vw, 2.5rem);
  --fs-h3:      clamp(1.35rem, 1.15rem + 0.8vw, 1.625rem);
  --fs-lead:    clamp(1.1rem, 1rem + 0.5vw, 1.3rem);
  --fs-body:    1.0625rem;   /* 17px */
  --fs-small:   0.9375rem;   /* 15px */
  --fs-label:   0.75rem;     /* 12px uppercase */

  --lh-tight:  1.04;   /* display */
  --lh-head:   1.12;   /* headings */
  --lh-snug:   1.3;    /* leads */
  --lh-body:   1.6;    /* paragraphs */

  /* brandbook: "Tracking -30 for all type's setting" => -0.03em */
  --tracking:        -0.03em;
  --tracking-tight:  -0.04em;  /* very large display */
  --tracking-label:  0.06em;   /* uppercase labels read better open */

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

  --section-y:  clamp(48px, 6vw, 88px);
  --gutter:     clamp(20px, 4vw, 40px);
  --container:        1200px;
  --container-narrow: 720px;

  /* ---- Radius -------------------------------------------------------------- */
  --r-sm:   10px;
  --r-md:   14px;
  --r-lg:   18px;
  --r-xl:   28px;
  --r-2xl:  36px;
  --r-pill: 999px;

  /* ---- Shadow / elevation -------------------------------------------------- */
  --shadow-soft: 0 8px 22px rgba(26, 26, 26, 0.06);
  --shadow-md:   0 12px 28px rgba(26, 26, 26, 0.10);
  --shadow-lg:   0 26px 70px rgba(26, 26, 26, 0.18);
  --ring:        0 0 0 3px rgba(49, 76, 205, 0.32);

  /* ---- Z-index scale ------------------------------------------------------- */
  --z-base:    0;     /* decorative shapes (behind content) */
  --z-content: 1;     /* content above shapes inside a shape-field */
  --z-nav:     50;    /* sticky nav pill */
  --z-overlay: 100;   /* dropdowns, popovers */
  --z-modal:   1000;  /* full-screen modal / mobile sheet */

  /* ---- Motion -------------------------------------------------------------- */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur:  0.18s;
}