/* ============================================================
   MILIVA INC — DESIGN TOKENS
   Palette: Asphalt & Pine
   Fonts:   Barlow Condensed + Inter
   ============================================================ */

:root {

  /* ── COLOR: BACKGROUNDS ── */
  --bg-primary:      #1B1F23;   /* page background                */
  --bg-surface:      #242930;   /* cards, panels                  */
  --bg-elevated:     #2D333B;   /* hover cards, active states     */
  --bg-overlay:      rgba(27, 31, 35, .92); /* modals, overlays  */
  --bg-hero:         #151A1E;   /* hero section — deepest tone    */

  /* ── COLOR: ACCENT (EMERALD) ── */
  --accent:          #22C55E;   /* primary accent                 */
  --accent-hover:    #34D569;   /* buttons hover, link hover      */
  --accent-muted:    rgba(34, 197, 94, .12); /* subtle tint fills */
  --accent-border:   rgba(34, 197, 94, .28); /* accent borders    */

  /* ── COLOR: TEXT ── */
  --text-primary:    #F0F2F4;   /* headings, primary copy         */
  --text-body:       #C9CDD3;   /* body paragraphs                */
  --text-secondary:  #8B949E;   /* captions, meta, muted text     */
  --text-on-accent:  #0B1A0F;   /* text rendered on accent bg     */

  /* ── COLOR: BORDERS & DIVIDERS ── */
  --border:          #30363D;   /* default border                 */
  --border-light:    #3A424B;   /* subtle dividers                */

  /* ── TYPOGRAPHY: FONT FAMILIES ── */
  --font-heading:    'Barlow Condensed', sans-serif;
  --font-body:       'Inter', sans-serif;

  /* ── TYPOGRAPHY: SCALE (mobile-first) ──
     Each step ×1.25 (major third).
     Desktop overrides in @media blocks in base.css.
  */
  --text-xs:    0.75rem;    /* 12px — tags, fine print        */
  --text-sm:    0.8125rem;  /* 13px — captions, table cells   */
  --text-base:  0.9375rem;  /* 15px — body text (mobile)      */
  --text-md:    1rem;       /* 16px — body text (desktop)     */
  --text-lg:    1.125rem;   /* 18px — lead text               */
  --text-xl:    1.25rem;    /* 20px — small headings          */

  /* Heading sizes — mobile defaults */
  --text-h6:    1rem;       /* 16px  */
  --text-h5:    1.125rem;   /* 18px  */
  --text-h4:    1.25rem;    /* 20px  */
  --text-h3:    1.5rem;     /* 24px  */
  --text-h2:    1.75rem;    /* 28px  */
  --text-h1:    2.25rem;    /* 36px  */
  --text-display: 3rem;     /* 48px — hero headline           */

  /* Stat numbers */
  --text-stat:  2rem;       /* 32px mobile → 3rem desktop     */

  /* ── TYPOGRAPHY: LINE HEIGHTS ── */
  --leading-none:    1;
  --leading-tight:   1.1;
  --leading-snug:    1.3;
  --leading-normal:  1.6;
  --leading-relaxed: 1.8;

  /* ── TYPOGRAPHY: LETTER SPACING ── */
  --tracking-tight:  -0.02em;
  --tracking-normal:  0;
  --tracking-wide:    0.05em;
  --tracking-wider:   0.1em;
  --tracking-widest:  0.2em;

  /* ── TYPOGRAPHY: FONT WEIGHTS ── */
  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;
  --weight-black:    900;

  /* ── SPACING SCALE (8px grid) ── */
  --space-1:   0.25rem;  /*  4px */
  --space-2:   0.5rem;   /*  8px */
  --space-3:   0.75rem;  /* 12px */
  --space-4:   1rem;     /* 16px */
  --space-5:   1.25rem;  /* 20px */
  --space-6:   1.5rem;   /* 24px */
  --space-8:   2rem;     /* 32px */
  --space-10:  2.5rem;   /* 40px */
  --space-12:  3rem;     /* 48px */
  --space-16:  4rem;     /* 64px */
  --space-20:  5rem;     /* 80px */
  --space-24:  6rem;     /* 96px */

  /* ── LAYOUT ── */
  --content-max:     1120px;  /* max content width              */
  --content-padding: var(--space-5);  /* 20px mobile side pad   */
  --section-gap:     var(--space-16); /* 64px between sections  */

  /* ── BORDERS & RADIUS ── */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-full: 9999px;

  /* ── SHADOWS ── */
  --shadow-sm:   0 1px 2px rgba(0,0,0,.3);
  --shadow-md:   0 4px 12px rgba(0,0,0,.4);
  --shadow-lg:   0 8px 24px rgba(0,0,0,.5);
  --shadow-glow: 0 0 20px rgba(34, 197, 94, .15);

  /* ── TRANSITIONS ── */
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --duration-fast:   150ms;
  --duration-base:   250ms;
  --duration-slow:   400ms;
  --duration-scroll: 600ms;

  /* ── Z-INDEX SCALE ── */
  --z-base:     1;
  --z-dropdown: 10;
  --z-sticky:   100;
  --z-overlay:  200;
  --z-modal:    300;
}


/* ── DESKTOP OVERRIDES (≥768px) ── */
@media (min-width: 768px) {
  :root {
    --text-base:    1rem;       /* 16px */
    --text-h3:      1.75rem;    /* 28px */
    --text-h2:      2.25rem;    /* 36px */
    --text-h1:      2.75rem;    /* 44px */
    --text-display: 4rem;       /* 64px */
    --text-stat:    3rem;       /* 48px */
    --content-padding: var(--space-10); /* 40px */
    --section-gap:  var(--space-20);    /* 80px */
  }
}

/* ── LARGE DESKTOP (≥1200px) ── */
@media (min-width: 1200px) {
  :root {
    --text-display: 4.5rem;     /* 72px */
  }
}