/* ==========================================================================
   becoming friends with... — design tokens
   Hazy 70s underground-comix palette derived from the BFW bubble-letter mark.
   ========================================================================== */

:root {
  /* Type scale */
  --text-xs: clamp(0.75rem, 0.7rem + 0.25vw, 0.875rem);
  --text-sm: clamp(0.875rem, 0.8rem + 0.35vw, 1rem);
  --text-base: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
  --text-lg: clamp(1.125rem, 1rem + 0.75vw, 1.5rem);
  --text-xl: clamp(1.5rem, 1.2rem + 1.25vw, 2.25rem);
  --text-2xl: clamp(2rem, 1.2rem + 2.5vw, 3.5rem);
  --text-3xl: clamp(2.5rem, 1rem + 4vw, 5rem);
  --text-hero: clamp(2.75rem, 0.5rem + 6.5vw, 7rem);

  /* Spacing */
  --space-1: 0.25rem;  --space-2: 0.5rem;   --space-3: 0.75rem;
  --space-4: 1rem;     --space-5: 1.25rem;  --space-6: 1.5rem;
  --space-8: 2rem;     --space-10: 2.5rem;  --space-12: 3rem;
  --space-16: 4rem;    --space-20: 5rem;    --space-24: 6rem;
  --space-32: 8rem;

  /* Radius */
  --radius-sm: 0.375rem;
  --radius-md: 0.625rem;
  --radius-lg: 1rem;
  --radius-xl: 1.75rem;
  --radius-full: 9999px;

  --transition-interactive: 200ms cubic-bezier(0.16, 1, 0.3, 1);

  /* Content widths */
  --content-narrow: 640px;
  --content-default: 960px;
  --content-wide: 1200px;

  /* Fonts */
  --font-display: 'Chillax', 'Trebuchet MS', sans-serif;
  --font-body: 'General Sans', 'Helvetica Neue', Arial, sans-serif;

  /* Ink outline weight — the comix black line */
  --ink: 2px;
}

/* ---------- LIGHT ---------- */
:root,
[data-theme='light'] {
  --color-bg: #fbf5e9;
  --color-surface: #fffbf1;
  --color-surface-2: #fffdf8;
  --color-surface-offset: #f3e8d3;
  --color-surface-dynamic: #ecdfc6;
  --color-divider: #e4d6bd;
  --color-border: #d6c5a6;

  --color-text: #1c1712;
  --color-text-muted: #6c6154;
  --color-text-faint: #9a8d7b;
  --color-text-inverse: #fffbf1;

  /* Primary — burnt orange, AA on cream */
  --color-primary: #b8510a;
  --color-primary-hover: #964008;
  --color-primary-active: #75300a;
  --color-primary-highlight: #f6dcc2;

  /* Brand orange — graphic use only (large shapes, the mark) */
  --color-brand: #f5891a;

  /* Ink line */
  --color-ink: #14100c;

  /* Hazy gradient stops (from the logo backdrop) */
  --haze-1: #f7c7d9;
  --haze-2: #ffe3a8;
  --haze-3: #b8e6cf;
  --haze-4: #c9d9f5;

  --shadow-sm: 0 1px 2px oklch(0.2 0.02 60 / 0.08);
  --shadow-md: 0 4px 14px oklch(0.2 0.02 60 / 0.1);
  --shadow-lg: 0 14px 36px oklch(0.2 0.02 60 / 0.14);
  --shadow-ink: 4px 4px 0 var(--color-ink);
}

/* ---------- DARK ---------- */
[data-theme='dark'] {
  --color-bg: #14110d;
  --color-surface: #1c1813;
  --color-surface-2: #241f18;
  --color-surface-offset: #211c15;
  --color-surface-dynamic: #2e271e;
  --color-divider: #2a241c;
  --color-border: #443a2d;

  --color-text: #efe6d6;
  --color-text-muted: #a2988a;
  --color-text-faint: #746b5e;
  --color-text-inverse: #1c1813;

  --color-primary: #ffa03a;
  --color-primary-hover: #ffbb6e;
  --color-primary-active: #ffd09a;
  --color-primary-highlight: #3b2c1a;

  --color-brand: #f5891a;
  --color-ink: #0a0806;

  --haze-1: #7d3f57;
  --haze-2: #7a6230;
  --haze-3: #2f5f4c;
  --haze-4: #37456b;

  --shadow-sm: 0 1px 2px oklch(0 0 0 / 0.35);
  --shadow-md: 0 4px 14px oklch(0 0 0 / 0.45);
  --shadow-lg: 0 14px 36px oklch(0 0 0 / 0.55);
  --shadow-ink: 4px 4px 0 #000;
}