/* =====================================================================
   bhavitverma.com v4 — design tokens
   System: Vivid Motion reference audit (structure + measurements only).
   Fonts are free substitutes: Instrument Serif / Inter Tight / Oxygen Mono.
   ===================================================================== */

:root {
  /* ---------- Fluid root scale (never below 16px) ---------- */
  --scale: calc(100vw * 16 / 800);

  /* ---------- Neutral ---------- */
  --n-0: #ffffff;
  --n-50: #f5f5f5;
  --n-100: #ececec;
  --n-150: #e2e2e2;
  --n-200: #d8d8d8;
  --n-300: #c5c5c5;
  --n-400: #b1b1b1;
  --n-500: #9e9e9e;
  --n-600: #808080;
  --n-700: #636363;
  --n-800: #454545;
  --n-850: #363636;
  --n-900: #282828;
  --n-950: #191919;
  --n-1000: #0a0a0a;

  /* ---------- Orange ---------- */
  --o-50: #fdebe7;
  --o-100: #fad8cf;
  --o-150: #f8c4b7;
  --o-200: #f5b09f;
  --o-300: #f0896f;
  --o-400: #eb613f;
  --o-500: #e63a0f;
  --o-600: #b82e0c;
  --o-700: #8a2309;
  --o-800: #5c1706;
  --o-850: #451105;
  --o-900: #2e0c03;
  --o-950: #170602;

  /* ---------- Semantic colour ---------- */
  --bg: var(--n-1000);
  --fg: var(--n-0);
  --text-2: var(--n-400);        /* secondary copy */
  --text-muted: var(--n-600);    /* dates, labels — also used where VM used #636363 on small text (AA) */
  --text-subtle: var(--n-700);   /* large text only (fails AA below 18px) */
  --text-ghost: var(--n-900);    /* decorative numbers */
  --accent: var(--o-500);        /* icons, fluid, rules */
  --accent-fill: #d8350b;        /* orange behind white text: 4.7:1, passes AA (VM's #e63a0f is 4.2) */
  --accent-hover: var(--o-600);
  --surface: var(--n-950);
  --surface-raised: var(--n-900);
  --glass: color-mix(in oklab, var(--n-500) 15%, transparent);
  --glass-dark: color-mix(in oklab, var(--n-1000) 15%, transparent);
  --backdrop: color-mix(in oklab, var(--n-1000) 75%, transparent);
  --hairline: color-mix(in oklab, var(--n-0) 7.5%, transparent);
  --hairline-solid: var(--n-950);
  --media-ph: color-mix(in oklab, var(--n-0) 5%, transparent);
  --blur: blur(4rem);

  /* ---------- Type families ---------- */
  --font-display: "Instrument Serif", "Times New Roman", serif;
  --font-body: "Inter Tight", Arial, sans-serif;
  --font-mono: "Oxygen Mono", Tahoma, monospace;

  /* ---------- Type sizes (desktop > 991) ---------- */
  --h-xl: 8rem;
  --h-lg: 6rem;
  --h-md: 4rem;
  --h-sm: 3rem;
  --h-xs: 2.25rem;
  --h-2xs: 1.75rem;
  --b-xl: 1.25rem;
  --b-lg: 1.125rem;
  --b-md: 1rem;
  --b-sm: 0.875rem;
  --b-xs: 0.75rem;
  --link: 0.875rem;

  /* ---------- Spacing ---------- */
  --size: 0.25rem;
  --gutter: 2rem;
  --gap: 0.5rem;
  --nav-h: 5.25rem;
  --hero-pt: calc(var(--nav-h) + var(--gutter));
  --section-pt: 8rem;
  --hero-gap: 16rem;

  /* ---------- Radius ---------- */
  --r-xs: 0.25rem;
  --r-sm: 0.5rem;
  --r-md: 1.25rem;
  --r-full: 16rem;

  /* ---------- Motion ---------- */
  --ease-nav: cubic-bezier(0.77, 0, 0.175, 1);
  --ease-dot: cubic-bezier(0.175, 0.885, 0.32, 1.275);
  --ease-pill: cubic-bezier(0.165, 0.84, 0.44, 1);
  --ease-featured: cubic-bezier(0.23, 1, 0.32, 1);
  --t-color: 0.15s;
  --t-bg: 0.25s;

  /* ---------- Layers ---------- */
  --z-canvas: 0;
  --z-section: 1;
  --z-overlay: 2;
  --z-page: 11;
  --z-trail: 100;
  --z-nav: 999;
}

/* Root scale steps (later rules win) */
@media (min-width: 768px) {
  :root { --scale: calc(100vw * 16 / 1066.67); }
}
@media (min-width: 768px) and (min-aspect-ratio: 16/9) and (min-height: 480px) {
  :root { --scale: calc(100vh * 16 / 600); }
}
@media (min-width: 1024px) {
  :root { --scale: calc(100vw * 16 / 1600); }
}
@media (min-width: 1024px) and (min-aspect-ratio: 16/9) and (min-height: 480px) {
  :root { --scale: calc(100vh * 16 / 900); }
}

/* Tablet + mobile type tokens */
@media (max-width: 991px) {
  :root {
    --h-xl: 4rem;
    --h-lg: 3rem;
    --h-md: 2.5rem;
    --h-sm: 2rem;
    --h-xs: 1.75rem;
    --h-2xs: 1.5rem;
    --b-xl: 1.125rem;
    --b-lg: 1rem;
    --section-pt: 6rem;
    --hero-gap: 8rem;
  }
}

@media (max-width: 767px) {
  :root {
    --gutter: 1rem;
    --section-pt: 4rem;
    --hero-pt: 6.25rem;
  }
}