/*
  ============================================================
  ATTICUS LI — DESIGN TOKENS
  tokens.css · v1.0
  
  Import this file first on every page of your site.
  This is the single source of truth for all visual decisions.
  ============================================================
*/

/* ── GOOGLE FONTS IMPORT ── */
@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=DM+Serif+Display:ital@0;1&family=DM+Mono:ital,wght@0,400;0,500;1,400&family=DM+Sans:ital,wght@0,300;0,400;0,500;0,600;1,400&display=swap');

/* ────────────────────────────────────────
   ROOT TOKENS
   All design decisions live here.
   Change once → updates everywhere.
──────────────────────────────────────── */
:root {

  /* ── COLORS ── */

  /* Core palette */
  --color-black:       #0c0b09;   /* Primary background (dark sections) */
  --color-white:       #f6f3ee;   /* Primary background (light sections) — warm off-white */
  --color-red:         #d93a28;   /* Primary accent — CTAs, highlights, labels */
  --color-red-dark:    #a82c1d;   /* Red hover state */
  --color-red-muted:   rgba(217, 58, 40, 0.12); /* Red tint for backgrounds */
  --color-red-border:  rgba(217, 58, 40, 0.25); /* Red tint for borders */

  /* Grays */
  --color-gray:        #4a4540;   /* Body text, secondary content — 5.5:1 on cream (WCAG AA) */
  --color-gray-light:  #ddd9d2;   /* Borders, dividers */
  --color-gray-bg:     #efebe4;   /* Subtle section backgrounds, card fills */
  --color-gray-mid:    #7a746c;   /* Placeholder text, tertiary content */

  /* Dark section overlays */
  --color-white-90:    rgba(246, 243, 238, 0.90);
  --color-white-60:    rgba(246, 243, 238, 0.60);
  --color-white-45:    rgba(246, 243, 238, 0.45);
  --color-white-38:    rgba(246, 243, 238, 0.38);
  --color-white-22:    rgba(246, 243, 238, 0.22);
  --color-white-09:    rgba(246, 243, 238, 0.09);
  --color-white-03:    rgba(246, 243, 238, 0.03);
  --color-white-07:    rgba(246, 243, 238, 0.07);

  /* ── TYPOGRAPHY ── */

  /* Font families */
  --font-display:  'Bebas Neue', sans-serif;      /* Headlines, numbers, hero text */
  --font-serif:    'DM Serif Display', serif;     /* Pull quotes, italic accents */
  --font-mono:     'DM Mono', monospace;          /* Labels, tags, metadata, code */
  --font-sans:     'DM Sans', sans-serif;         /* Body text, UI elements */

  /* Font sizes — fluid scale */
  --text-xs:    14px;  /* min readable for labels/tags/meta */
  --text-sm:    15px;  /* secondary UI text */
  --text-base:  17px;  /* body minimum */
  --text-md:    18px;
  --text-lg:    20px;
  --text-xl:    21px;
  --text-2xl:   25px;
  --text-3xl:   33px;

  /* Display sizes — clamp(min, preferred, max) — reduced maximums for legibility */
  --text-d-sm:   clamp(24px, 3vw,   36px);   /* section labels, small headings */
  --text-d-md:   clamp(32px, 4vw,   48px);   /* card headings, subheadings */
  --text-d-lg:   clamp(38px, 5vw,   60px);   /* section h2 headings */
  --text-d-xl:   clamp(48px, 6.5vw, 76px);   /* article/page titles */
  --text-d-hero: clamp(56px, 8vw,   96px);   /* hero headline only */

  /* Font weights */
  --weight-light:    300;
  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;

  /* Line heights */
  --leading-tight:   0.92;
  --leading-heading: 1.1;
  --leading-snug:    1.35;
  --leading-normal:  1.6;
  --leading-relaxed: 1.75;

  /* Letter spacing */
  --tracking-tight:  -0.01em;
  --tracking-normal: 0.01em;
  --tracking-wide:   0.05em;
  --tracking-wider:  0.1em;
  --tracking-widest: 0.18em;
  --tracking-ultra:  0.2em;

  /* ── SPACING ── */
  --space-1:   4px;
  --space-2:   8px;
  --space-3:   12px;
  --space-4:   16px;
  --space-5:   20px;
  --space-6:   24px;
  --space-8:   32px;
  --space-10:  40px;
  --space-12:  48px;
  --space-16:  64px;
  --space-20:  80px;
  --space-24:  96px;
  --space-32:  128px;

  /* Section padding — fluid */
  --section-pad-x: clamp(20px, 5vw, 80px);
  --section-pad-y: clamp(64px, 9vw, 128px);

  /* ── LAYOUT ── */
  --max-width:        1100px;
  --max-width-narrow: 720px;
  --max-width-text:   640px;
  --nav-height:       56px;

  /* ── BORDERS ── */
  --border-light:   1px solid var(--color-gray-light);
  --border-dark:    1px solid var(--color-white-09);
  --border-dark-md: 1px solid rgba(255,255,255,0.08);

  /* ── TRANSITIONS ── */
  --transition-fast:   0.15s ease;
  --transition-base:   0.2s ease;
  --transition-slow:   0.35s ease;
  --transition-reveal: 0.6s ease;

  /* ── SHADOWS ── */
  --shadow-sm:  0 1px 3px rgba(12,11,9,0.08);
  --shadow-md:  0 4px 16px rgba(12,11,9,0.12);
  --shadow-lg:  0 8px 32px rgba(12,11,9,0.18);
}