/* ============================================================
   Design tokens — colors, type, spacing, layers
   Observed from the live Framer site (samyakchakrabarty.com)
   ============================================================ */

:root {
  /* --- Brand greens (site accent) --- */
  --accent:        #A6FF3D;   /* nav highlight / primary */
  --accent-mid:    #9CE325;   /* glow / titles */
  --accent-deep:   #8CC63F;   /* darker accent */
  --accent-glow:   rgba(156, 227, 37, 0.45);

  /* --- Dark theme (default page) --- */
  --bg:            #0a0a0a;
  --bg-elev:       #141414;   /* raised cards */
  --bg-elev-2:     #1c1c1c;
  --border:        rgba(255, 255, 255, 0.10);
  --border-strong: rgba(255, 255, 255, 0.18);
  --fg:            #f4f5f2;
  --fg-dim:        #a2a49c;
  --fg-faint:      #6b6d66;

  /* --- Light section (Abilities) --- */
  --light-bg:      #f2f3ee;
  --light-fg:      #0c0d0a;
  --light-dim:     #55574f;

  /* --- Type --- */
  --font-head: "Magistral", "Eurostile", "Bahnschrift", "Arial Narrow", system-ui, sans-serif;
  --font-body: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* --- Fluid type scale (desktop-first) --- */
  --step--2: clamp(0.7rem, 0.66rem + 0.18vw, 0.8rem);   /* smallest: tag text */
  --step--1: clamp(0.82rem, 0.78rem + 0.2vw, 0.94rem);
  --step-0:  clamp(1rem, 0.95rem + 0.25vw, 1.15rem);
  --step-1:  clamp(1.1rem, 1.0rem + 0.45vw, 1.4rem);   /* NEW intermediate: between step-0 and step-2 */
  --step-2:  clamp(1.3rem, 1.1rem + 0.9vw, 1.9rem);    /* was step-1 */
  --step-3:  clamp(1.7rem, 1.4rem + 1.4vw, 2.55rem);   /* was step-2 */
  --step-4:  clamp(2.2rem, 1.75rem + 2.1vw, 3.4rem);   /* was step-3 */
  --step-5:  clamp(2.9rem, 2.2rem + 3.2vw, 4.6rem);    /* was step-4 */

  /* --- Spacing --- */
  --space-xs: 0.5rem;
  --space-sm: 1rem;
  --space-md: 2rem;
  --space-lg: 4rem;
  --space-xl: 8rem;
  --section-pad: clamp(1.25rem, 5vw, 6rem);

  /* --- Radii --- */
  --r-sm: 8px;
  --r-md: 16px;
  --r-lg: 28px;
  --r-pill: 999px;

  /* --- Layout --- */
  --maxw: 1440px;
  --nav-h: 56px;

  /* --- Z-index layers --- */
  --z-scene:     1;   /* three.js canvases sit behind section content */
  --z-content:   2;
  --z-nav:       50;
  --z-overlay:   80;  /* read-more / read-article overlays */
  --z-preloader: 100;

  /* --- Motion --- */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
}