/* Artie tokens. Values from DESIGN.md (Mascot, warm palette). Names follow the shared schema. */

:root {
  /* Colour */
  --color-dominant: #2D2D1F;      /* charcoal: text, outlines, hard shadows, primary buttons */
  --color-surface: #E8DCC4;       /* cream page */
  --color-surface-alt: #F4ECDC;   /* paper cards and inputs */
  --color-ink: #2D2D1F;
  --color-ink-muted: #4F4636;
  --color-accent: #8D5844;        /* rust, large text only */
  --color-on-accent: #F4ECDC;
  --color-line: #2D2D1F;

  /* Artie-specific extras */
  --color-accent-small: #7A4A38;  /* rust for small text, contrast-safe */
  --color-highlight: #D9A953;     /* mustard band, secondary CTA */
  --color-highlight-soft: #E8C27A;/* handwriting on charcoal */
  --color-night: #3D3A2A;         /* lock-screen hills */
  --color-night-2: #5A4A32;
  --color-on-night-muted: #D8CBB0;

  /* Type */
  --font-display: "Bricolage Grotesque", "Arial Black", sans-serif;
  --font-text: "Bricolage Grotesque", Arial, sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, monospace;
  --font-hand: "Caveat", "Bradley Hand", cursive;
  --text-xs: 13px;
  --text-sm: 15px;
  --text-base: 18px;
  --text-lg: 20px;
  --text-xl: clamp(28px, 3.4vw, 42px);
  --text-display: clamp(40px, 5.6vw, 72px);
  --text-hand: 30px;
  --leading-tight: 1.04;
  --leading-body: 1.55;
  --tracking-display: -1.5px;
  --weight-text: 400;
  --weight-strong: 600;
  --weight-display: 800;

  /* Space */
  --space-1: 6px;
  --space-2: 12px;
  --space-3: 24px;
  --space-4: 40px;
  --space-5: 72px;
  --space-6: 96px;
  --measure: 46ch;
  --page-gutter: 24px;
  --page-max: 1080px;

  /* Shape */
  --radius-sm: 12px;
  --radius-md: 16px;
  --radius-lg: 28px;
  --border-width: 3px;
  --shadow: 0 6px 0 var(--color-dominant);          /* hard, no blur */
  --shadow-offset: 10px 10px 0 var(--color-dominant);

  /* Motion */
  --duration: 320ms;
  --easing: cubic-bezier(.2, .8, .2, 1);
}

@media (max-width: 480px) {
  :root { --page-gutter: 16px; --space-5: 48px; --space-6: 64px; }
}