/* =============================================================
   CLAIMLYTICS — Design tokens (colors + type + elevation + motion)
   Consumed by every asset in this design system.
   ============================================================= */

@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root {
  /* ---------- BRAND ---------- */
  --cl-navy:        #0A192F;   /* Primary surface, headings            */
  --cl-navy-2:      #0F2340;   /* Slightly raised navy (gradients)     */
  --cl-navy-3:      #152C4E;   /* Cards on navy                        */
  --cl-orange:      #FF6B00;   /* Primary accent                       */
  --cl-orange-2:    #E55F00;   /* Accent hover                         */
  --cl-orange-soft: #FFF0E6;   /* Accent tint / chip bg                */

  /* ---------- NEUTRALS (cool slate, tuned to navy) ---------- */
  --cl-white:       #FFFFFF;
  --cl-bg:          #F5F7FA;   /* App background                       */
  --cl-surface:     #FFFFFF;   /* Card / sheet surface                 */
  --cl-g1:          #EEF1F5;   /* Hairline fill                        */
  --cl-g2:          #DCE1E8;   /* Border                               */
  --cl-g3:          #B6BECB;   /* Divider strong                       */
  --cl-g4:          #8A95A5;   /* Muted text                           */
  --cl-g5:          #6B7A8D;   /* Secondary text                       */
  --cl-g6:          #4A5567;   /* Body                                 */
  --cl-g7:          #2A3547;   /* Body strong                          */

  --cl-on-navy:     rgba(255,255,255,.92);
  --cl-on-navy-2:   rgba(255,255,255,.64);
  --cl-on-navy-3:   rgba(255,255,255,.38);

  /* ---------- SEMANTIC ---------- */
  --cl-ok:          #1FA971;   --cl-ok-soft:   #E6F6EF;
  --cl-warn:        #D98A00;   --cl-warn-soft: #FDF2DC;
  --cl-err:         #D0384E;   --cl-err-soft:  #FCE8EC;
  --cl-info:        #2F6FEB;   --cl-info-soft: #E6EEFD;

  /* ---------- TYPE ---------- */
  --cl-font-head:   'Manrope', ui-sans-serif, system-ui, sans-serif;
  --cl-font-body:   'Plus Jakarta Sans', ui-sans-serif, system-ui, sans-serif;
  --cl-font-mono:   'JetBrains Mono', ui-monospace, 'SF Mono', Consolas, monospace;

  --cl-text-xs:     11.5px;
  --cl-text-sm:     13px;
  --cl-text-base:   14.5px;
  --cl-text-md:     16.5px;
  --cl-text-lg:     19px;
  --cl-text-xl:     22px;
  --cl-text-2xl:    28px;
  --cl-text-3xl:    36px;
  --cl-text-4xl:    48px;
  --cl-text-5xl:    62px;

  --cl-track-tight: -0.035em;
  --cl-track-snug:  -0.02em;
  --cl-track-body:  -0.005em;
  --cl-track-wide:   0.12em;

  --cl-lh-tight: 1.08;
  --cl-lh-head:  1.15;
  --cl-lh-body:  1.65;

  /* ---------- RADII ---------- */
  --cl-r-xs:  6px;
  --cl-r-sm:  8px;
  --cl-r-md:  12px;
  --cl-r-lg:  16px;
  --cl-r-xl:  24px;
  --cl-r-pill: 999px;

  /* ---------- SPACING (8pt) ---------- */
  --cl-sp-1:  4px;
  --cl-sp-2:  8px;
  --cl-sp-3:  12px;
  --cl-sp-4:  16px;
  --cl-sp-5:  24px;
  --cl-sp-6:  32px;
  --cl-sp-7:  48px;
  --cl-sp-8:  64px;
  --cl-sp-9:  96px;

  /* ---------- ELEVATION ---------- */
  --cl-sh-1: 0 1px 2px rgba(10,25,47,.05);
  --cl-sh-2: 0 4px 12px rgba(10,25,47,.06);
  --cl-sh-3: 0 12px 32px rgba(10,25,47,.08);
  --cl-sh-4: 0 24px 64px rgba(10,25,47,.12);
  --cl-sh-accent: 0 8px 32px rgba(255,107,0,.30);

  /* ---------- MOTION ---------- */
  --cl-ease:     cubic-bezier(.16,1,.3,1);
  --cl-dur-1:    .18s;
  --cl-dur-2:    .3s;
  --cl-dur-3:    .5s;
  --cl-dur-4:    .9s;
}

/* -------- Base utility classes ------- */
.cl-reset, .cl-reset *, .cl-reset *::before, .cl-reset *::after { box-sizing: border-box; }

.cl-body  { font-family: var(--cl-font-body); color: var(--cl-navy);
            -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
.cl-head  { font-family: var(--cl-font-head); font-weight: 800; letter-spacing: var(--cl-track-snug); }
.cl-mono  { font-family: var(--cl-font-mono); }

/* Type scale helpers */
.cl-h-display { font-family: var(--cl-font-head); font-weight: 800; font-size: var(--cl-text-5xl);
                letter-spacing: var(--cl-track-tight); line-height: var(--cl-lh-tight); }
.cl-h1 { font-family: var(--cl-font-head); font-weight: 800; font-size: var(--cl-text-4xl);
         letter-spacing: var(--cl-track-tight); line-height: var(--cl-lh-head); }
.cl-h2 { font-family: var(--cl-font-head); font-weight: 800; font-size: var(--cl-text-3xl);
         letter-spacing: var(--cl-track-snug); line-height: 1.18; }
.cl-h3 { font-family: var(--cl-font-head); font-weight: 700; font-size: var(--cl-text-xl);
         letter-spacing: var(--cl-track-snug); line-height: 1.3; }
.cl-h4 { font-family: var(--cl-font-head); font-weight: 700; font-size: var(--cl-text-lg);
         letter-spacing: var(--cl-track-snug); line-height: 1.35; }
.cl-eyebrow { font-family: var(--cl-font-head); font-size: 12px; font-weight: 700;
              text-transform: uppercase; letter-spacing: var(--cl-track-wide); color: var(--cl-orange); }
.cl-body-lg { font-family: var(--cl-font-body); font-size: var(--cl-text-md);
              line-height: var(--cl-lh-body); color: var(--cl-g5); }
.cl-body-md { font-family: var(--cl-font-body); font-size: var(--cl-text-base);
              line-height: 1.7; color: var(--cl-g5); }
.cl-caption { font-family: var(--cl-font-body); font-size: var(--cl-text-sm);
              color: var(--cl-g4); letter-spacing: var(--cl-track-body); }