/* ==========================================================================
   DigiCov - Design Tokens
   Values transcribed from the DigiCov Design System v1.0 brand sheet.
   Change a value here and it propagates across every page.
   ========================================================================== */

:root {
  /* ---- Brand: neutrals ------------------------------------------------- */
  --c-charcoal:    #1E232B;
  --c-slate:       #485563;
  --c-steel:       #6B7280;
  --c-light-grey:  #E5E7EB;
  --c-off-white:   #F7F8FA;
  --c-white:       #FFFFFF;

  /* ---- Brand: accents -------------------------------------------------- */
  --c-orange:      #FF7A00;
  --c-coral:       #FF5A3C;
  --c-amber:       #FFB020;

  /* ---- Semantic -------------------------------------------------------- */
  --c-success:     #16A34A;
  --c-info:        #0EA5E9;
  --c-warning:     #F59E0B;
  --c-error:       #EF4444;

  /* ---- Derived surfaces ------------------------------------------------ */
  --surface:            var(--c-white);
  --surface-alt:        var(--c-off-white);
  --surface-invert:     var(--c-charcoal);
  --surface-invert-2:   #262C36;

  --text-strong:        var(--c-charcoal);
  --text-body:          var(--c-slate);
  --text-muted:         var(--c-steel);
  --text-on-invert:     var(--c-white);
  --text-on-invert-mut: #A9B2BF;

  --border:             var(--c-light-grey);
  --border-soft:        rgba(30, 35, 43, 0.08);
  --border-invert:      rgba(255, 255, 255, 0.12);

  /* Accent washes - used for soft chips, icon plates, hover fills */
  --accent-wash:        rgba(255, 122, 0, 0.08);
  --accent-wash-strong: rgba(255, 122, 0, 0.16);
  --coral-wash:         rgba(255, 90, 60, 0.08);

  /* The signature brand gradient - orange into coral */
  --grad-brand: linear-gradient(115deg, var(--c-orange) 0%, var(--c-coral) 100%);
  --grad-text:  linear-gradient(100deg, var(--c-orange) 0%, var(--c-coral) 92%);

  /* ---- Typography ------------------------------------------------------ */
  --font-display: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-body:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  /* Fluid type scale. min → max across a 380px..1440px viewport.
     Tracking values come from the brand sheet's typography scale. */
  --fs-display: clamp(2.75rem, 1.60rem + 4.85vw, 5.00rem);  /* Hero        */
  --fs-h1:      clamp(2.25rem, 1.55rem + 2.95vw, 3.50rem);  /* Page title  */
  --fs-h2:      clamp(1.75rem, 1.32rem + 1.82vw, 2.625rem); /* Section     */
  --fs-h3:      clamp(1.25rem, 1.10rem + 0.63vw, 1.5rem);   /* Card title  */
  --fs-h4:      1.125rem;
  --fs-lead:    clamp(1.0625rem, 1.01rem + 0.24vw, 1.1875rem);
  --fs-body:    1rem;
  --fs-sm:      0.875rem;
  --fs-xs:      0.8125rem;
  --fs-eyebrow: 0.75rem;

  --lh-tight:   1.06;
  --lh-snug:    1.18;
  --lh-normal:  1.45;
  --lh-relaxed: 1.68;

  --tr-display: -0.032em;
  --tr-heading: -0.022em;
  --tr-tight:   -0.011em;
  --tr-normal:  0em;
  --tr-wide:    0.14em;

  /* ---- Spacing - 4pt base --------------------------------------------- */
  --s-1:   0.25rem;   /* 4   */
  --s-2:   0.5rem;    /* 8   */
  --s-3:   0.75rem;   /* 12  */
  --s-4:   1rem;      /* 16  */
  --s-5:   1.25rem;   /* 20  */
  --s-6:   1.5rem;    /* 24  */
  --s-8:   2rem;      /* 32  */
  --s-10:  2.5rem;    /* 40  */
  --s-12:  3rem;      /* 48  */
  --s-16:  4rem;      /* 64  */
  --s-20:  5rem;      /* 80  */
  --s-24:  6rem;      /* 96  */
  --s-32:  8rem;      /* 128 */

  /* Vertical rhythm for full-bleed sections */
  --section-y:       clamp(4.5rem, 3rem + 6.4vw, 8rem);
  --section-y-tight: clamp(3.5rem, 2.5rem + 4.2vw, 5.5rem);

  /* ---- Radius ---------------------------------------------------------- */
  --r-2:    2px;
  --r-4:    4px;
  --r-8:    8px;
  --r-12:   12px;
  --r-16:   16px;
  --r-24:   24px;
  --r-full: 999px;

  /* ---- Elevation ------------------------------------------------------- */
  --e-0: none;
  --e-1: 0 1px 2px rgba(0, 0, 0, 0.05);
  --e-2: 0 4px 12px rgba(0, 0, 0, 0.08);
  --e-3: 0 8px 24px rgba(0, 0, 0, 0.12);
  --e-4: 0 16px 40px rgba(0, 0, 0, 0.16);
  /* Warm-tinted lift, used on accent-bearing cards so the shadow doesn't grey out */
  --e-brand: 0 18px 40px -12px rgba(255, 90, 60, 0.35);

  /* ---- Motion ---------------------------------------------------------- */
  --ease-out:      cubic-bezier(0.22, 1, 0.36, 1);
  --ease-expo:     cubic-bezier(0.16, 1, 0.30, 1);
  --ease-in-out:   cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring:   cubic-bezier(0.34, 1.56, 0.64, 1);

  --d-fast:  150ms;
  --d-base:  250ms;
  --d-slow:  400ms;
  --d-slower: 700ms;

  /* ---- Layout ---------------------------------------------------------- */
  --container:      1240px;
  --container-tight: 940px;
  --gutter:         clamp(1.25rem, 0.85rem + 1.7vw, 2.5rem);
  --header-h:       76px;

  --z-base:    1;
  --z-sticky:  100;
  --z-header:  200;
  --z-overlay: 300;
  --z-toast:   400;
}

/* Every motion in the system routes through these two variables, so a single
   media query below disables animation site-wide for users who ask for it. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --d-fast: 0.01ms;
    --d-base: 0.01ms;
    --d-slow: 0.01ms;
    --d-slower: 0.01ms;
  }
}