/* ============================================================
   tajwalia.com · 2026 — Kinetic Design System · Layer 0: TOKENS
   Single source of truth. Every other stylesheet consumes only
   the custom properties defined in this file.
   ============================================================ */

:root{

  /* ---------- Color · Confident Light Premium ---------- */
  --paper:#FBF9F5;
  --paper-deep:#F3EFE8;
  --card:#FFFFFF;
  --ink:#161D24;
  --ink-soft:#3C444C;
  --muted:#6E6A63;
  --line:#E4DED4;
  --accent:#A64A1B;
  --accent-deep:#7E370F;
  --accent-tint:#F6E8DE;
  --green:#1F5B4E;

  /* RGB triplets for alpha composition (glass, glows, shadows) */
  --ink-rgb:22,29,36;
  --accent-rgb:166,74,27;
  --paper-rgb:251,249,245;
  --card-rgb:255,255,255;

  /* ---------- Typography · two-voice, high contrast ---------- */
  --serif:"Fraunces", Georgia, serif;
  --sans:"Inter", -apple-system, "Segoe UI", sans-serif;

  --text-2xs:0.694rem;
  --text-xs:0.79rem;
  --text-sm:0.9rem;
  --text-base:1.0625rem;
  --text-md:clamp(1.15rem, 1.6vw, 1.35rem);
  --text-lg:clamp(1.35rem, 2.2vw, 1.7rem);
  --text-xl:clamp(1.9rem, 3.6vw, 2.7rem);
  --text-display:clamp(2.75rem, 7vw, 5.5rem);
  --text-metric:clamp(2.2rem, 4.5vw, 3.6rem);

  --track-caps:.14em;
  --track-display:-.025em;
  --leading-display:1.02;
  --leading-tight:1.12;
  --leading-body:1.65;

  /* ---------- Spacing · exact 8px lattice ---------- */
  --u:8px;
  --s1:calc(var(--u) * 1);    /*   8px */
  --s2:calc(var(--u) * 2);    /*  16px */
  --s3:calc(var(--u) * 3);    /*  24px */
  --s4:calc(var(--u) * 4);    /*  32px */
  --s5:calc(var(--u) * 5);    /*  40px */
  --s6:calc(var(--u) * 6);    /*  48px */
  --s8:calc(var(--u) * 8);    /*  64px */
  --s10:calc(var(--u) * 10);  /*  80px */
  --s12:calc(var(--u) * 12);  /*  96px */
  --s16:calc(var(--u) * 16);  /* 128px */
  --s20:calc(var(--u) * 20);  /* 160px */

  /* Asymmetric layout rhythm: heavier above, lighter below */
  --section-pad-t:clamp(var(--s10), 9vw, var(--s16));
  --section-pad-b:clamp(var(--s8), 6vw, var(--s12));
  --offset-col:var(--s10);
  --card-pad:var(--s4) var(--s4) var(--s3);

  /* ---------- Layout ---------- */
  --maxw:1180px;
  --gutter:var(--s3);
  --r-sm:10px;
  --r-md:14px;
  --r-lg:22px;
  --r-pill:99px;
  --radius:var(--r-md); /* legacy alias consumed by ported components */

  /* ---------- Elevation ---------- */
  --shadow-1:0 1px 2px rgba(var(--ink-rgb), .05);
  --shadow-2:0 1px 2px rgba(var(--ink-rgb), .05), 0 12px 32px -12px rgba(var(--ink-rgb), .12);
  --shadow-3:0 2px 4px rgba(var(--ink-rgb), .06), 0 24px 48px -16px rgba(var(--ink-rgb), .18);
  --shadow:var(--shadow-2); /* legacy alias */

  /* ---------- Glass · frosted-paper tier system ---------- */
  --glass-1-bg:rgba(var(--card-rgb), .55);
  --glass-1-blur:14px;
  --glass-1-border:1px solid rgba(var(--ink-rgb), .08);

  --glass-2-bg:rgba(var(--paper-rgb), .65);
  --glass-2-blur:20px;
  --glass-2-border:1px solid rgba(var(--accent-rgb), .12);
  --glass-2-highlight:inset 0 1px 0 rgba(255,255,255,.6);

  --glass-3-bg:rgba(var(--card-rgb), .78);
  --glass-3-blur:28px;
  --glass-3-border:1px solid rgba(var(--ink-rgb), .1);

  /* ---------- Motion ---------- */
  --ease-out-expo:cubic-bezier(.16, 1, .3, 1);
  --ease-out-quart:cubic-bezier(.25, 1, .5, 1);
  --ease-spring:cubic-bezier(.34, 1.56, .64, 1);
  --t-fast:180ms;
  --t-med:420ms;
  --t-slow:700ms;
  --t-reveal:900ms;
  --stagger-step:70ms;

  /* ---------- Focus ---------- */
  --focus-ring:2px solid var(--accent);
  --focus-offset:3px;
}