/* ============================================================
   RANGBLAZE MEDIA: 01 · DESIGN TOKENS
   The single source of truth for colour, type, space and motion.
   Logo red #E41C3C · Charcoal #423F3C
   ============================================================ */

:root{
  /* ---------- FOUNDATION ---------- */
  --ink:        #0A1430;   /* headings, dark sections */
  --ink-deep:   #060D22;   /* footer */
  --ink-2:      #111E42;
  --ink-3:      #18274F;
  --blaze:      #E41C3C;   /* brand red: actions only, matches logo */
  --blaze-dk:   #BE1531;
  --blaze-hi:   #FF4A63;
  --charcoal:   #423F3C;   /* logo secondary */

  /* neutrals. Most of the page is these */
  --white:      #FFFFFF;
  --paper:      #F7F9FC;
  --paper-2:    #EEF2F8;
  --line:       #E1E7F0;
  --line-2:     #CBD5E4;
  --body:       #4A5468;
  --mute:       #7A869E;
  --rule-d:     rgba(255,255,255,.10);
  --rule-d2:    rgba(255,255,255,.16);
  --text-d:     #B4C0D8;   /* body on dark */
  --text-d2:    #8492AE;   /* muted on dark */

  /* ---------- THE RANG SPECTRUM ----------
     Six sectors × three stops. Tint = section background,
     Base = accents/icons/rules, Deep = text on own tint.
     Each sector owns its hue everywhere it appears. */
  --health-tint:#E6F5F3;  --health:#0E9F8F;  --health-deep:#0A7A6E;
  --realty-tint:#EAECFB;  --realty:#4C5FD5;  --realty-deep:#3A49A8;
  --d2c-tint:   #FDEDE9;  --d2c:   #F06449;  --d2c-deep:   #C94B33;
  --food-tint:  #FBF2E2;  --food:  #D98E1F;  --food-deep:  #A96C13;
  --biz-tint:   #F2ECFA;  --biz:   #7C4DBE;  --biz-deep:   #5E3796;
  --travel-tint:#E6F2FB;  --travel:#2E9BD6;  --travel-deep:#2277A6;

  /* success (functional, ledger deltas only) */
  --pos:        #1E9E5E;
  --pos-hi:     #35C77E;

  /* ---------- TYPOGRAPHY ---------- */
  --f-dis:  'Montserrat', system-ui, -apple-system, sans-serif;
  --f-body: 'Lato', system-ui, -apple-system, sans-serif;
  --f-num:  'IBM Plex Mono', ui-monospace, 'SF Mono', monospace;

  --fs-hero: clamp(2.5rem, 5.6vw, 4.6rem);
  --fs-h1:   clamp(2.1rem, 4.4vw, 3.4rem);
  --fs-h2:   clamp(1.85rem, 3.8vw, 2.85rem);
  --fs-h3:   clamp(1.1rem, 1.7vw, 1.34rem);
  --fs-h4:   1rem;
  --fs-lead: clamp(1.04rem, 1.4vw, 1.2rem);
  --fs-body: clamp(1rem, 1.05vw, 1.07rem);
  --fs-sm:   .92rem;
  --fs-xs:   .8rem;
  --fs-2xs:  .7rem;

  /* ---------- SPACE & SHAPE ---------- */
  --gut: clamp(1.15rem, 4.5vw, 3rem);
  --sec: clamp(4rem, 8.5vw, 7rem);
  --max: 1220px;
  --max-narrow: 840px;
  --r-sm: 9px;
  --r:    14px;
  --r-lg: 22px;

  --sh:    0 1px 3px rgba(10,20,48,.04), 0 10px 30px rgba(10,20,48,.06);
  --sh-lg: 0 6px 18px rgba(10,20,48,.07), 0 26px 60px rgba(10,20,48,.11);

  /* ---------- MOTION ---------- */
  --ease:   cubic-bezier(.22,.9,.28,1);
  --ease-o: cubic-bezier(.16,1,.3,1);
  --t-fast: .25s;
  --t:      .4s;
  --t-slow: .8s;

  /* header height, used for sticky offsets */
  --nav-h: 72px;
}

/* sector helper classes, set --accent + --accent-tint + --accent-deep in one place */
.s-health {--accent:var(--health);--accent-tint:var(--health-tint);--accent-deep:var(--health-deep)}
.s-realty {--accent:var(--realty);--accent-tint:var(--realty-tint);--accent-deep:var(--realty-deep)}
.s-d2c    {--accent:var(--d2c);   --accent-tint:var(--d2c-tint);   --accent-deep:var(--d2c-deep)}
.s-food   {--accent:var(--food);  --accent-tint:var(--food-tint);  --accent-deep:var(--food-deep)}
.s-biz    {--accent:var(--biz);   --accent-tint:var(--biz-tint);   --accent-deep:var(--biz-deep)}
.s-travel {--accent:var(--travel);--accent-tint:var(--travel-tint);--accent-deep:var(--travel-deep)}