/* ============================================================
   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:         11px;                       /* pills, bottom nav */
  --text-sm:         12px;                       /* eyebrow, tag */
  --text-md:         13px;                       /* footer, chip, thumb label */
  --text-base:       14px;                       /* nav links */
  --text-body:       16px;                       /* paragraphs */
  --text-lg:         18px;                       /* h3, lead */
  --text-h2:         32px;                       /* fixed h2 */
  --text-h2-fluid:   clamp(36px, 5vw, 56px);    /* contact h2 */
  --text-h2-about:   clamp(28px, 3.4vw, 44px);  /* about h2 */
  --text-h1:         clamp(40px, 6vw, 72px);     /* page h1 */
  --text-hero:       128px;                      /* 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 ───────────────────────────────────────── */
  --space-2xs:  4px;
  --space-xs:   8px;
  --space-sm:  16px;
  --space-md:  24px;
  --space-lg:  32px;
  --space-xl:  64px;
  --space-2xl: 96px;

  /* ── Layout ──────────────────────────────────────────────── */
  --container-max: 1200px;
  --nav-h:          58px;
  --section-py:     96px;   /* section vertical padding, desktop */
  --section-py-sm:  64px;   /* section vertical padding, mobile */

  /* ── 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;

}