/* ============================================================
   DESIGN TOKENS — Anish Soni Portfolio
   Single source of truth. Import before all other stylesheets.
   Never hardcode values in components — reference tokens only.
   ============================================================ */

:root {

  /* ── Color: Raw surfaces ─────────────────────────────────── */
  --color-bg:        #F1F1F1;   /* page background */
  --color-ink:       #1a1a1a;   /* primary type, borders, dark fills */
  --color-muted:     #6b6b6b;   /* secondary type, placeholders */
  --color-line:      #d4d4d4;   /* hairlines, subtle dividers */
  --color-box:       #ededed;   /* placeholder fills */
  --color-box-dark:  #cfcfcf;   /* placeholder grid lines */
  --color-on-dark:   #F1F1F1;   /* type / borders on --color-ink surfaces */

  /* ── Color: Accent ───────────────────────────────────────── */
  --color-accent:    #FF383C;   /* hero title, cursor, underline, pulse */

  /* ── Color: Semantic ─────────────────────────────────────── */
  --color-surface:       var(--color-bg);
  --color-text:          var(--color-ink);
  --color-text-secondary: var(--color-muted);

  /* ── Typography: Families ────────────────────────────────── */
  --font-sans:    "Instrument Sans", -apple-system, BlinkMacSystemFont,
                  "Segoe UI", system-ui, sans-serif;
  --font-display: "Dirtyline", "Instrument Sans", sans-serif;

  /* ── Typography: Scale ───────────────────────────────────── */
  --text-xs:         clamp(10px, 0.75vw, 12px);         /* pills, bottom nav */
  --text-sm:         clamp(11px, 0.85vw, 13px);         /* eyebrow, tag */
  --text-md:         clamp(12px, 0.95vw, 14px);         /* footer, chip, thumb label */
  --text-base:       clamp(13px, 1.05vw, 16px);         /* nav links */
  --text-body:       clamp(14px, 1.2vw, 18px);          /* paragraphs */
  --text-lg:         clamp(16px, 1.5vw, 22px);          /* h3, lead */
  --text-h2:         clamp(28px, 2.8vw, 40px);          /* fixed h2 */
  --text-h2-fluid:   clamp(36px, 5vw, 64px);            /* contact h2 */
  --text-h2-about:   clamp(28px, 3.4vw, 48px);          /* about h2 */
  --text-h1:         clamp(40px, 6vw, 80px);            /* page h1 */
  --text-hero:       clamp(96px, 9.5vw, 160px);         /* hero display */

  /* ── Typography: Tracking ────────────────────────────────── */
  --tracking-body:  -0.05em;   /* headings, body */
  --tracking-tight: -0.04em;   /* logo, pills, nav, bottom nav */
  --tracking-wide:   0.14em;   /* eyebrows, tags (uppercase) */

  /* ── Typography: Leading ─────────────────────────────────── */
  --leading-tight: 1.1;   /* headlines */
  --leading-body:  1.5;   /* body text */

  /* ── Typography: Weights ─────────────────────────────────── */
  --weight-regular:   400;
  --weight-medium:    500;
  --weight-semibold:  600;
  --weight-bold:      700;
  --weight-extrabold: 800;

  /* ── Spacing scale — fluid, scales with viewport width ──── */
  --space-2xs:  clamp(3px,  0.25vw,  5px);
  --space-xs:   clamp(6px,  0.55vw,  10px);
  --space-sm:   clamp(12px, 1.1vw,   18px);
  --space-md:   clamp(18px, 1.65vw,  28px);
  --space-lg:   clamp(24px, 2.4vw,   44px);
  --space-xl:   clamp(48px, 4.8vw,   88px);
  --space-2xl:  clamp(72px, 7.5vw,   136px);

  /* ── Layout ──────────────────────────────────────────────── */
  --container-max: clamp(900px, 84vw, 1440px);  /* grows on wide screens */
  --nav-h:          clamp(52px, 5vh, 64px);
  --section-py:     clamp(72px, 8vw, 120px);    /* fluid vertical rhythm */
  --section-py-sm:  clamp(48px, 6vw,  80px);

  /* ── Borders & Radii ─────────────────────────────────────── */
  --border:        1px solid var(--color-ink);
  --border-subtle: 1px solid var(--color-line);
  --radius-pill:   999px;
  --radius-sm:     4px;
  --radius-md:     8px;

  /* ── Motion: Easing ──────────────────────────────────────── */
  --ease-out:  cubic-bezier(0.22, 1, 0.36, 1);   /* wipes, scales, slides */
  --ease-fill: cubic-bezier(0.5, 1, 0.25, 1);    /* pill fill */
  --ease-soft: cubic-bezier(0.45, 0, 0.55, 1);   /* floats, bounces */

  /* ── Motion: Durations ───────────────────────────────────── */
  --dur-fast:   150ms;   /* type weight, color */
  --dur-mid:    320ms;   /* fills, scale, opacity */
  --dur-slow:   520ms;   /* underline wipe */
  --dur-slower: 700ms;   /* portrait zoom, large transforms */
  --dur-float:    7s;    /* idle float */

  /* ── Cursor ──────────────────────────────────────────────── */
  /* OS cursor disabled — replaced by JS follower in cursor.js (see hide rules there) */
  --cursor-default: none;
  --cursor-pointer: none;

}