/* ============================================================
   TOKENS  —  the single source of truth for the design system
   ------------------------------------------------------------
   Philosophy
   · Space is the primary grouping mechanism, not borders.
   · One identity color (plum). Neutrals do the heavy lifting.
   · Borders are hairline and intentional — mostly side lines.
   · One typeface (Inter). Hierarchy comes from size/weight/space.
   ============================================================ */

:root {
  /* ---- Typeface (single face) ---------------------------- */
  --font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* ---- Type scale — bold & editorial --------------------- */
  /* Fluid where it matters (display/H1), fixed for reading.   */
  --step-display: clamp(1.85rem, 1.35rem + 2.4vw, 3rem);  /* hero */
  --step-h1:      clamp(1.5rem, 1.2rem + 1.4vw, 2.1rem);
  --step-h2:      clamp(1.15rem, 1.03rem + 0.6vw, 1.4rem);
  --step-h3:      1.05rem;
  --step-body:    1rem;        /* 16px — comfortable reading   */
  --step-sm:      0.875rem;    /* 14px                         */
  --step-label:   0.72rem;     /* ~11.5px — eyebrows / meta    */

  --leading-tight:  1.05;
  --leading-snug:   1.2;
  --leading-normal: 1.6;

  --weight-regular: 400;
  --weight-medium:  500;
  --weight-semibold:600;
  --weight-bold:    700;

  --tracking-label: 0.08em;    /* letter-spacing for eyebrows  */
  --tracking-tight: -0.02em;   /* big headings                 */

  /* ---- Spacing scale (4px base) -------------------------- */
  /* Grouping happens HERE, not with boxes.                    */
  --space-1: 0.25rem;   /*  4 */
  --space-2: 0.5rem;    /*  8 */
  --space-3: 0.75rem;   /* 12 */
  --space-4: 1rem;      /* 16 */
  --space-5: 1.5rem;    /* 24 */
  --space-6: 2rem;      /* 32 */
  --space-7: 3rem;      /* 48 */
  --space-8: 4rem;      /* 64 */
  --space-9: 6rem;      /* 96 */
  --space-10:8rem;      /*128 */

  /* Rhythm between major sections — the load-bearing space.    */
  --section-gap: clamp(2.5rem, 1.5rem + 3.6vw, 4.5rem);

  /* ---- Layout -------------------------------------------- */
  --measure: 68ch;          /* max reading width              */
  --container: 72rem;       /* 1152px page frame              */
  --container-narrow: 48rem;

  /* ---- Radius (soft, restrained) ------------------------- */
  --radius-sm: 6px;
  --radius:    10px;
  --radius-lg: 16px;
  --radius-pill: 999px;

  /* ---- Motion -------------------------------------------- */
  --ease: cubic-bezier(0.2, 0.6, 0.2, 1);
  --dur:  180ms;
  --dur-slow: 320ms;

  /* ========================================================
     COLOR — LIGHT (default)
     One identity color. Everything else is neutral ink/paper.
     ======================================================== */

  /* Paper / ink */
  --bg:        #ffffff;
  --surface:   #f7f8fa;   /* barely-there tint to group, no border */
  --surface-2: #f0f1f4;
  --ink:       #16181d;   /* primary text                    */
  --ink-muted: #565c66;   /* secondary text                  */
  --ink-faint: #8a909b;   /* meta, captions                  */

  /* Identity — plum. Used sparingly: links, focus, one keyword. */
  --identity:        #7d3a63;
  --identity-strong: #632c4e;   /* hover / pressed            */
  --identity-tint:   #f3e7efc0; /* wash behind featured work  */
  --on-identity:     #ffffff;   /* text on solid identity     */

  /* Lines — hairline, intentional. Prefer side lines.         */
  --line:        #e6e8ec;   /* default hairline              */
  --line-strong: #d3d6dd;   /* when a divider must be felt   */

  /* Accents — functional only, NOT decorative. Use rarely.    */
  --accent-warm: #c8792b;   /* a single emphasis pop         */
  --positive:    #1f9d5b;   /* "available" status dot        */

  /* Focus ring */
  --focus: 0 0 0 3px color-mix(in srgb, var(--identity) 35%, transparent);

  /* Shadows — soft, low, for the projects lift only */
  --shadow-sm: 0 1px 2px rgba(16,18,29,0.04);
  --shadow:    0 6px 24px -12px rgba(16,18,29,0.18);
  --shadow-lg: 0 18px 48px -20px rgba(16,18,29,0.28);

  color-scheme: light;
}

/* ==========================================================
   COLOR — DARK
   Not pure black. Plum lightens for contrast on dark paper.
   ========================================================== */
:root[data-theme="dark"] {
  --bg:        #0e1014;
  --surface:   #16191f;
  --surface-2: #1d212a;
  --ink:       #e8eaed;
  --ink-muted: #a2a8b3;
  --ink-faint: #6e747f;

  --identity:        #d090b9;
  --identity-strong: #e0abcf;
  --identity-tint:   #2c1d2880;
  --on-identity:     #0e1014;

  --line:        #262b34;
  --line-strong: #333a45;

  --accent-warm: #e0975a;
  --positive:    #38c07a;

  --focus: 0 0 0 3px color-mix(in srgb, var(--identity) 45%, transparent);

  --shadow-sm: 0 1px 2px rgba(0,0,0,0.3);
  --shadow:    0 6px 24px -12px rgba(0,0,0,0.6);
  --shadow-lg: 0 18px 48px -20px rgba(0,0,0,0.7);

  color-scheme: dark;
}

/* Follow OS when the user hasn't explicitly chosen a theme. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg:        #0e1014;
    --surface:   #16191f;
    --surface-2: #1d212a;
    --ink:       #e8eaed;
    --ink-muted: #a2a8b3;
    --ink-faint: #6e747f;
    --identity:        #d090b9;
    --identity-strong: #e0abcf;
    --identity-tint:   #2c1d2880;
    --on-identity:     #0e1014;
    --line:        #262b34;
    --line-strong: #333a45;
    --accent-warm: #e0975a;
    --positive:    #38c07a;
    --focus: 0 0 0 3px color-mix(in srgb, var(--identity) 45%, transparent);
    --shadow-sm: 0 1px 2px rgba(0,0,0,0.3);
    --shadow:    0 6px 24px -12px rgba(0,0,0,0.6);
    --shadow-lg: 0 18px 48px -20px rgba(0,0,0,0.7);
    color-scheme: dark;
  }
}