/* ==========================================================================
   Cosara.in — Design tokens v1.1
   Single source of truth. Never hard-code a value that exists here.
   Authoritative values from the Co-Dx Brand Guidelines (client, 2024),
   reconciled with co-dx.com. Accessibility uses the brand's own "Shades".
   ========================================================================== */

:root {
  /* ---- Brand accent (PANTONE 2228) ---- */
  --c-cyan:        #00A6C1;   /* primary brand cyan: borders, icons, fills, rings */
  --c-cyan-deep:   #008094;   /* brand Shade: text + links on white (WCAG AA 4.65:1) */
  --c-cyan-alt:    #00A6C1;   /* retained alias */
  --c-cyan-tint:   #F0FAFC;

  /* ---- Neutrals ---- */
  --c-white:       #FFFFFF;
  --c-black:       #000000;
  --c-slate:       #333F4C;   /* PANTONE 432: footer, dark bands */
  --c-grey:        #7C8795;   /* PANTONE 430: muted labels, logo wordmark */
  --c-grey-cool:   #A2AAB6;   /* PANTONE 429 */
  --c-grey-lt:     #C0C6D6;   /* PANTONE 428 */
  --c-lilac:       #E3E5EE;   /* PANTONE 427 60% */
  --c-grey-100:    #F2F2F2;   /* alternate section surface */
  --c-grey-50:     #F3F5F8;
  --c-line:        #DDE1E6;
  --c-dot:         #C7CFD8;   /* molecule / halftone field */

  /* ---- Identity spectrum (expanded palette) ---- */
  --c-purple:      #8E50A7;   /* PANTONE 3559 */
  --c-magenta:     #CE0060;   /* PANTONE Rubine Red */
  --c-orange:      #E87722;   /* PANTONE 158 C */
  --c-amber:       #EAAB00;   /* PANTONE 124 (yellow) */
  --c-green:       #A4D866;   /* PANTONE 367 */

  /* ---- Brand Shades (darker, AA-safe for white/black text) ---- */
  --c-cyan-shade:    #008094;
  --c-magenta-shade: #940045;
  --c-green-shade:   #59762E;
  --c-orange-shade:  #BD5A14;
  --c-purple-shade:  #5C3672;
  --c-amber-shade:   #946C00;

  /* Per-page accent. Overridden by [data-accent] — see base.css.
     --c-accent = bright mark colour (orbs, borders); --c-band = AA-safe fill. */
  --c-accent:      var(--c-cyan);
  --c-band:        var(--c-cyan-shade);
  --c-accent-ink:  var(--c-white);

  /* ---- Spectrum bar (brand order: light-orange, orange, red, purple,
     green, blue, looping back) ---- */
  --grad-brand: linear-gradient(90deg,
    #EAAB00 0%, #E87722 18%, #CE0060 38%,
    #8E50A7 58%, #A4D866 78%, #00A6C1 96%, #EAAB00 100%);

  /* ---- Type ---- */
  --ff-base: "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --fw-light: 300;
  --fw-reg:   400;
  --fw-semi:  600;
  --fw-bold:  700;

  --fs-h1:    80px;  --lh-h1: 88px;
  --fs-h2:    55px;  --lh-h2: 64px;
  --fs-h3:    55px;  --lh-h3: 64px;
  --fs-h4:    37px;  --lh-h4: 42px;
  --fs-hero: 100px;  --lh-hero: 0.92;
  --fs-body:  18px;  --lh-body: 24px;
  --fs-btn:   20px;
  --fs-input: 16px;
  --fs-meta:  16px;  --lh-meta: 22px;
  --fs-stat: 120px;

  /* ---- Layout ---- */
  --w-container:      1200px;
  --w-container-wide: 1360px;
  --w-measure:        70ch;
  --pad-gutter:       8%;
  --pad-section:      80px;
  --pad-section-sm:   60px;
  --pad-band:        120px;

  /* ---- Spacing scale (4px base) ---- */
  --s-1:   4px;  --s-2:   8px;  --s-3:  12px;  --s-4:  16px;
  --s-5:  20px;  --s-6:  24px;  --s-8:  32px;  --s-10: 40px;
  --s-12: 48px;  --s-15: 60px; --s-20: 80px;  --s-30:120px;

  /* ---- Radius + elevation ---- */
  --r-card:  10px;
  --r-pill: 100px;
  --sh-card:  0 2px 15px rgba(0, 0, 0, .15);
  --sh-panel: 0 0 15px rgba(0, 0, 0, .15);

  /* ---- Motion ---- */
  --t-base: 200ms ease;

  /* ---- Chrome ---- */
  --h-header: 84px;
}

/* Tablet */
@media (max-width: 1024px) {
  :root {
    --fs-h1: 72px;  --lh-h1: 80px;
    --fs-h2: 52px;  --lh-h2: 62px;
    --fs-h3: 52px;  --lh-h3: 62px;
    --fs-hero: 68px;
    --fs-stat: 96px;
    --pad-section: 64px;
    --pad-band: 88px;
    --h-header: 76px;
  }
}

/* Mobile */
@media (max-width: 767px) {
  :root {
    --fs-h1: 60px;  --lh-h1: 68px;
    --fs-h2: 50px;  --lh-h2: 60px;
    --fs-h3: 50px;  --lh-h3: 60px;
    --fs-hero: 46px;
    --fs-stat: 72px;
    --fs-btn: 18px;
    --pad-section: 48px;
    --pad-section-sm: 40px;
    --pad-band: 64px;
    --pad-gutter: 24px;
    --h-header: 68px;
  }
}