/* ============================================================================
   MABA — Design Tokens
   Source of values: "Hey Maba Redesign" (Claude Design export) — VALUES ONLY,
   no markup copied. Palette · type scale · spacing · radii · borders · shadows
   · motion. Everything downstream (nav, footer, /dub, pages) consumes these.
   Design language note: corners are SHARP (radius 0); only pills/dots/circles
   round. Surfaces are flat with 1.5px hairline borders, not shadows-at-rest.
   ========================================================================== */

:root {
  /* ── Palette ─────────────────────────────────────────────────────────── */
  --cream:       #f7f1e2;   /* page background (warm paper) */
  --paper:        #fffdf5;   /* raised surface / cards on paper */
  --ink:         #1e1b17;   /* primary text, near-black */
  --red:         #ef2803;   /* brand primary */
  --red-dark:    #c11f00;   /* brand hover / pressed */
  --yellow:      #ffce00;   /* accent / highlight */
  --ink-deep:        #17150f;   /* dark sections (About, footer) */
  --cream-on-dark:       #faf5e6;   /* text & surfaces on dark */
  --white:       #ffffff;

  /* channel triplets, for rgba() composition */
  --ink-rgb:     30, 27, 23;
  --cod-rgb:   250, 245, 230;

  /* ink alphas on paper (text tiers + borders) */
  --ink-90: rgba(var(--ink-rgb), .90);
  --ink-72: rgba(var(--ink-rgb), .72);   /* body on paper */
  --ink-68: rgba(var(--ink-rgb), .68);
  --ink-66: rgba(var(--ink-rgb), .66);
  --ink-55: rgba(var(--ink-rgb), .55);
  --ink-50: rgba(var(--ink-rgb), .50);   /* muted labels */
  --ink-45: rgba(var(--ink-rgb), .45);
  --ink-24: rgba(var(--ink-rgb), .24);   /* dashed border */
  --ink-20: rgba(var(--ink-rgb), .20);   /* outline-button border */
  --ink-14: rgba(var(--ink-rgb), .14);   /* card border */
  --ink-12: rgba(var(--ink-rgb), .12);   /* section divider */

  /* cream alphas on dark */
  --cod-85: rgba(var(--cod-rgb), .85);   /* links on dark */
  --cod-68: rgba(var(--cod-rgb), .68);   /* body on dark */
  --cod-60: rgba(var(--cod-rgb), .60);
  --cod-50: rgba(var(--cod-rgb), .50);
  --cod-45: rgba(var(--cod-rgb), .45);   /* labels on dark */
  --cod-20: rgba(var(--cod-rgb), .20);
  --cod-14: rgba(var(--cod-rgb), .14);
  --cod-12: rgba(var(--cod-rgb), .12);

  /* ── Type families ───────────────────────────────────────────────────── */
  --font-sans: 'Archivo', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  --font-mono: 'DM Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --font-kn:   'Noto Sans Kannada', sans-serif;
  --font-hi:   'Noto Sans Devanagari', sans-serif;
  --font-ta:   'Noto Sans Tamil', sans-serif;
  --font-te:   'Noto Sans Telugu', sans-serif;
  --font-ml:   'Noto Sans Malayalam', sans-serif;

  /* ── Weights ─────────────────────────────────────────────────────────── */
  --fw-reg:400; --fw-med:500; --fw-semi:600; --fw-bold:700; --fw-xbold:800; --fw-black:900;

  /* ── Type scale (fluid where the design flexes; clamps keep it responsive) */
  --fs-display:  clamp(48px, 8vw, 92px);   /* hero H1 */
  --fs-script:   clamp(52px, 8vw, 96px);   /* hero rotating language script */
  --fs-h2:       clamp(38px, 5.4vw, 62px); /* section headings */
  --fs-h3:       clamp(30px, 3.6vw, 40px); /* card headings */
  --fs-h4:       21px;                      /* small headings */
  --fs-price:    clamp(44px, 5.2vw, 62px); /* pricing numerals */
  --fs-numeral:  clamp(40px, 4.8vw, 56px); /* step numerals */
  --fs-lead:     clamp(17px, 1.4vw, 20px); /* lead paragraph */
  --fs-body:     17px;                      /* body */
  --fs-body-sm:  15.5px;                    /* dense body */
  --fs-nav:      14px;                      /* nav links */
  --fs-btn:      16px;                      /* buttons */
  --fs-mono:     12px;                      /* eyebrow / mono label */
  --fs-mono-sm:  11px;                      /* small mono label */
  --fs-mono-xs:  10.5px;                    /* tiny mono label */

  /* line-heights */
  --lh-tight:   .95;   /* display */
  --lh-display: .98;   /* section H2 */
  --lh-snug:    1.02;  /* card H3 */
  --lh-heading: 1.2;
  --lh-body:    1.55;
  --lh-relaxed: 1.6;

  /* letter-spacing */
  --ls-display: -.04em; /* large display / headings */
  --ls-heading: -.03em; /* card headings / numerals */
  --ls-eyebrow: .16em;  /* section eyebrow (mono, uppercase) */
  --ls-label:   .12em;  /* labels / tags */
  --ls-label-2: .10em;  /* tighter labels */
  --ls-mono:    .04em;  /* ticker mono */

  /* ── Spacing scale ───────────────────────────────────────────────────── */
  --sp-1:2px;  --sp-2:4px;  --sp-3:8px;  --sp-4:10px; --sp-5:12px; --sp-6:14px;
  --sp-7:16px; --sp-8:18px; --sp-9:20px; --sp-10:22px; --sp-11:26px; --sp-12:30px;
  --sp-13:34px; --sp-14:40px; --sp-15:44px; --sp-16:56px;

  --section-y: clamp(56px, 8vw, 82px);     /* vertical section rhythm */
  --gutter:    clamp(20px, 5vw, 56px);     /* horizontal page padding */
  --maxw:      1280px;                      /* content max width */

  /* ── Radii ───────────────────────────────────────────────────────────── */
  --radius:        0;      /* default: sharp corners (brand language) */
  --radius-pill:   999px;  /* pills */
  --radius-circle: 50%;    /* avatars, play button, status dots */

  /* ── Borders ─────────────────────────────────────────────────────────── */
  --border-hair:   1px solid var(--ink-12);      /* section dividers */
  --border-card:   1.5px solid var(--ink-14);    /* card outline at rest */
  --border-strong: 2px solid var(--ink);         /* outline buttons */
  --border-dashed: 1.5px dashed var(--ink-24);   /* "coming soon" note */
  --border-hair-dark: 1px solid var(--cod-14); /* dividers on dark */

  /* ── Shadows (used on hover/lift only; flat at rest) ─────────────────── */
  --shadow-hover:        0 14px 34px rgba(var(--ink-rgb), .12);
  --shadow-hover-strong: 0 14px 34px rgba(var(--ink-rgb), .14);

  /* ── Motion ──────────────────────────────────────────────────────────── */
  --ease:       cubic-bezier(.2, 0, 0, 1);
  --ease-inout: ease-in-out;
  --dur-fast:   .25s;   /* hover / underline */
  --dur-mid:    .5s;    /* script rise */
  --dur-slow:   .7s;    /* logo cross-fade */
  --lift:       translateY(-4px);   /* card hover lift */
}

/* ── Keyframes (motion layer; consumed by components) ─────────────────────
   Named mb-* to avoid collisions with any existing page animations.        */
@keyframes mb-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes mb-blink   { 0%,45% { opacity:1 } 50%,95% { opacity:.28 } 100% { opacity:1 } }
@keyframes mb-rise    { from { opacity:0; transform: translateY(8px) } to { opacity:1; transform: translateY(0) } }
@keyframes mb-drift1  { 0% { transform: translate(0,0) scale(1) } 50% { transform: translate(130px,70px) scale(1.16) } 100% { transform: translate(0,0) scale(1) } }
@keyframes mb-drift2  { 0% { transform: translate(0,0) scale(1) } 50% { transform: translate(-110px,90px) scale(1.2) } 100% { transform: translate(0,0) scale(1) } }
@keyframes mb-drift3  { 0% { opacity:.5; transform: translate(0,0) scale(1) } 50% { opacity:.95; transform: translate(70px,-34px) scale(1.12) } 100% { opacity:.5; transform: translate(0,0) scale(1) } }

/* Respect reduced-motion: freeze decorative animation. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}