/* ============================================================
   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-surface-dark: #000000;   /* full-bleed dark sections */
  --color-card:         #FFFFFF;   /* cards and thumbnails on dark */
  --color-ink:          #1a1a1a;   /* primary type, borders, dark fills */
  --color-muted:        #6b6b6b;   /* captions and labels only never long-form text */
  --color-line:         #d4d4d4;   /* hairlines, subtle dividers */
  --color-box:          #ededed;   /* placeholder fills */
  --color-box-dark:     #cfcfcf;   /* placeholder grid lines */
  --color-on-dark:       #F1F1F1;                 /* headings and body on black */
  --color-on-dark-muted: rgba(241,241,241,0.55);  /* secondary text on black */

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

  /* ── Typography: Scale (design-system/foundations.md) ────── */
  /* Seven roles. rem in every clamp so user font-size prefs scale. */
  --text-display:    clamp(3rem, 1rem + 10.5vw, 9.375rem);       /* 48-150px · 500 · page intro + footer headline */
  --text-h1:         clamp(2.5rem, 1rem + 4.7vw, 5rem);          /* 40-80px  · 600 · one per page */
  --text-h2:         clamp(1.625rem, 0.75rem + 3.4vw, 3.375rem); /* 26-54px  · 600 · section starts */
  --text-h3:         clamp(1.125rem, 0.875rem + 0.9vw, 1.625rem);/* 18-26px  · 600 · card titles */
  --text-body:       clamp(0.875rem, 0.75rem + 0.35vw, 1.125rem);/* 14-18px  · 400 · short-form copy */
  --text-body-dense: clamp(0.875rem, 0.8rem + 0.2vw, 0.9375rem); /* 14-15px  · 400 · long-form narrative, always ink */
  --text-label:      clamp(0.6875rem, 0.6rem + 0.25vw, 0.8125rem);/* 11-13px · 500 · eyebrows/tags, uppercase 0.14em */

  /* Legacy chrome sizes (pills, nav, footer) not part of the 7 roles */
  --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-lg:         clamp(16px, 1.5vw, 22px);          /* h3, lead */
  --text-h2-fluid:   clamp(36px, 5vw, 64px);            /* contact h2 */
  --text-h2-about:   clamp(28px, 3.4vw, 48px);          /* about h2 */
  --text-hero:       clamp(96px, 9.5vw, 160px);         /* index hero stage */

  /* ── 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: 700;   /* font's real range ends at 700 800 never rendered */

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

}