/* ============================================
   DESIGN TOKENS — THE BLUEPRINT
   ============================================ */

:root {
  /* ── Colors ── */
  --c-bg:             #F5F3EF;
  --c-bg-alt:         #EDEBE6;
  --c-surface:        #FFFFFF;
  --c-text:           #1C1C1C;
  --c-text-secondary: #6B6560;
  --c-text-tertiary:  #9B9590;
  --c-accent:         #A8523B;
  --c-accent-light:   #C4654A;
  --c-accent-hover:   #8E4432;
  --c-terracotta:     #C4654A;
  --c-terracotta-hover: #A8523B;
  --c-border:         #D4D0CA;
  --c-border-light:   #E5E2DC;
  --c-grid:           rgba(180, 175, 168, 0.07);
  --c-tag-bg:         rgba(168, 82, 59, 0.08);
  --c-status-live:    #3A7D44;
  --c-status-dev:     #B8860B;

  /* ── Typography ── */
  --f-sans: 'Space Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --f-mono: 'JetBrains Mono', 'SF Mono', 'Fira Code', 'Consolas', monospace;

  /* ── Type Scale ── */
  --ts-2xs:    0.6875rem;   /* 11px */
  --ts-xs:     0.75rem;     /* 12px */
  --ts-sm:     0.8125rem;   /* 13px */
  --ts-base:   1rem;        /* 16px */
  --ts-md:     1.125rem;    /* 18px */
  --ts-lg:     1.25rem;     /* 20px */
  --ts-xl:     1.5rem;      /* 24px */
  --ts-2xl:    2rem;        /* 32px */
  --ts-3xl:    2.5rem;      /* 40px */
  --ts-4xl:    3.25rem;     /* 52px */
  --ts-5xl:    4rem;        /* 64px */
  --ts-6xl:    5rem;        /* 80px */

  /* ── Line Heights ── */
  --lh-tight:   1.1;
  --lh-snug:    1.2;
  --lh-heading: 1.25;
  --lh-normal:  1.55;
  --lh-relaxed: 1.7;

  /* ── Font Weights ── */
  --fw-light:    300;
  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;

  /* ── Spacing ── */
  --s-4:   0.25rem;
  --s-8:   0.5rem;
  --s-12:  0.75rem;
  --s-16:  1rem;
  --s-20:  1.25rem;
  --s-24:  1.5rem;
  --s-32:  2rem;
  --s-40:  2.5rem;
  --s-48:  3rem;
  --s-56:  3.5rem;
  --s-64:  4rem;
  --s-80:  5rem;
  --s-96:  6rem;
  --s-120: 7.5rem;
  --s-160: 10rem;

  /* ── Layout ── */
  --max-w:        1400px;
  --max-w-narrow: 900px;
  --container-px: 2.5rem;
  --grid-gap:     2rem;
  --section-py:   var(--s-120);
  --grid-size:    80px;

  /* ── Navigation ── */
  --nav-h: 64px;

  /* ── Transitions ── */
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --t-fast:   150ms var(--ease-out);
  --t-base:   300ms var(--ease-out);
  --t-medium: 500ms var(--ease-out);
  --t-slow:   800ms var(--ease-out);
  --t-slower: 1200ms var(--ease-out);

  /* ── Border Radius ── */
  --radius-sm: 3px;
  --radius-md: 6px;

  /* ── Z-index ── */
  --z-base:    1;
  --z-nav:     100;
  --z-overlay: 200;

  /* ── Theme transition ── */
  --t-theme: 400ms ease;
}


/* ============================================
   DARK THEME
   ============================================ */

[data-theme="dark"] {
  --c-bg:             #1A1A1E;
  --c-bg-alt:         #232328;
  --c-surface:        #2A2A30;
  --c-text:           #E8E6E1;
  --c-text-secondary: #A8A4A0;
  --c-text-tertiary:  #706C68;
  --c-accent:         #D4765E;
  --c-accent-light:   #E08A70;
  --c-accent-hover:   #C4654A;
  --c-terracotta:     #D4765E;
  --c-terracotta-hover: #E08A70;
  --c-border:         #3A3838;
  --c-border-light:   #2F2D2D;
  --c-grid:           rgba(100, 95, 88, 0.06);
  --c-tag-bg:         rgba(212, 118, 94, 0.12);
  --c-status-live:    #5AAF66;
  --c-status-dev:     #D4A844;
}