/*
 * Pizzalio — design tokens
 * Ported unchanged from the Claude Design export (_ds/tokens/*.css).
 * Every colour, size and timing in the theme resolves back to a variable here,
 * so changing the brand means editing this file and nothing else.
 */

/* ---------------------------------------------------------------
   Self-hosted webfonts. Files live in ../fonts/.

   These are TrueType (.ttf), the only format google.com/fonts offers as a
   direct download. Every browser supports it. The trade-off is size: a .ttf is
   roughly three times heavier than the same font as .woff2, because .woff2 is
   the same outlines wrapped in Brotli compression.

   To upgrade later, convert each file to .woff2 and change `format("truetype")`
   to `format("woff2")` and the extension to .woff2 below. Nothing else changes.

   `font-display: swap` means text is painted immediately in the fallback font
   and re-painted when the webfont arrives — the words are never invisible.

   If a file is missing the browser falls back to the next family in the stack,
   so the site degrades rather than breaks.
   --------------------------------------------------------------- */

@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/poppins-400.ttf") format("truetype");
}
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/poppins-500.ttf") format("truetype");
}
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/poppins-600.ttf") format("truetype");
}
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/poppins-700.ttf") format("truetype");
}
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("../fonts/poppins-800.ttf") format("truetype");
}
@font-face {
  font-family: "Sacramento";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/sacramento-400.ttf") format("truetype");
}
@font-face {
  font-family: "Space Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/spacemono-400.ttf") format("truetype");
}
@font-face {
  font-family: "Space Mono";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/spacemono-700.ttf") format("truetype");
}

:root {
  /* --- base ramps --- */
  --cream-50: #FFFAF3;
  --cream-100: #FDF1E4;
  --cream-200: #F8E7D3;
  --peach-200: #FFE1C8;
  --peach-300: #FFC79E;
  --peach-400: #FCAF7B;
  --orange-300: #FFA061;
  --orange-400: #FF7A3D;
  --orange-500: #F4552A;
  --orange-600: #DE3F17;
  --orange-700: #B62F0F;
  --pink-200: #FFDCE8;
  --pink-300: #FFC0D7;
  --pink-400: #FF92BC;
  --pink-500: #FF5C9E;
  --pink-600: #E63F80;
  --yellow-200: #FFEBC2;
  --yellow-300: #FBD08A;
  --yellow-400: #F7B85C;
  --ink-900: #3B1F14;
  --ink-700: #6B4433;
  --ink-500: #9A7160;
  --ink-300: #C7A493;
  --white: #FFFFFF;

  /* --- semantic surfaces --- */
  --surface-page: var(--cream-100);
  --surface-card: var(--white);
  --surface-card-tint: var(--cream-50);
  --surface-sunk: var(--cream-200);
  --surface-hot: var(--orange-500);
  --surface-hot-deep: var(--orange-600);
  --surface-sweet: var(--pink-500);
  --surface-sweet-soft: var(--pink-200);
  --surface-warm-soft: var(--peach-200);
  --surface-dough: var(--yellow-200);
  --surface-inverse: var(--ink-900);

  /* --- semantic text --- */
  --text-body: var(--ink-700);
  --text-strong: var(--ink-900);
  --text-muted: var(--ink-500);
  --text-hot: var(--orange-500);
  --text-sweet: var(--pink-500);
  --text-on-hot: var(--white);
  --text-on-sweet: var(--white);
  --text-on-dark: var(--cream-50);

  /* --- lines --- */
  --border-soft: #F0DCC8;
  --border-strong: var(--ink-900);
  --border-hot: var(--orange-500);
  --divider: #F3E2D2;

  /* --- state --- */
  --state-hover-veil: rgba(59, 31, 20, .06);
  --state-press-veil: rgba(59, 31, 20, .12);
  --focus-ring: var(--pink-500);

  /* --- semantic feedback --- */
  --success-500: #2FA36B;
  --success-100: #DDF3E7;
  --warning-500: var(--yellow-400);
  --warning-100: var(--yellow-200);
  --danger-500: var(--orange-600);
  --danger-100: #FFDCD2;
  --info-500: var(--pink-500);
  --info-100: var(--pink-200);

  /* --- type --- */
  --font-display: "Poppins", system-ui, sans-serif;
  --font-body: "Poppins", system-ui, sans-serif;
  --font-script: "Sacramento", cursive;
  --font-mono: "Space Mono", ui-monospace, monospace;

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

  --text-hero: 80px;
  --text-hero-lh: .88;
  --text-display: 56px;
  --text-display-lh: .92;
  --text-title: 34px;
  --text-title-lh: 1;
  --text-section: 22px;
  --text-section-lh: 1.15;

  --text-lg: 17px;
  --text-base: 15px;
  --text-sm: 13px;
  --text-xs: 11px;
  --text-body-lh: 1.6;

  --track-display: -.02em;
  --track-tight: -.01em;
  --track-eyebrow: .08em;
  --track-label: .12em;

  --script-accent: 44px;

  /* --- spacing --- */
  --space-0: 0px;
  --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;

  --gutter-page: 28px;
  --section-gap: 20px;
  --card-pad: 20px;
  --card-pad-lg: 28px;
  --control-pad-x: 22px;
  --max-page: 1180px;

  /* --- radius --- */
  --radius-xs: 8px;
  --radius-sm: 12px;
  --radius-md: 16px;
  --radius-lg: 22px;
  --radius-xl: 28px;
  --radius-2xl: 36px;
  --radius-block: 32px;
  --radius-pill: 999px;
  --radius-circle: 50%;
  --blob-1: 58% 42% 47% 53% / 45% 50% 50% 55%;
  --blob-2: 40% 60% 62% 38% / 55% 40% 60% 45%;

  /* --- shadows: warm-tinted, low, never grey --- */
  --shadow-xs: 0 1px 2px rgba(112, 58, 32, .06);
  --shadow-sm: 0 2px 8px rgba(112, 58, 32, .08);
  --shadow-md: 0 8px 20px rgba(112, 58, 32, .10);
  --shadow-lg: 0 18px 40px rgba(112, 58, 32, .14);
  --shadow-hot: 0 10px 24px rgba(244, 85, 42, .28);
  --shadow-sweet: 0 10px 24px rgba(255, 92, 158, .28);
  --shadow-inset-press: inset 0 2px 0 rgba(59, 31, 20, .12);
  --ring-focus: 0 0 0 3px rgba(255, 92, 158, .45);

  /* --- motion --- */
  --dur-fast: 120ms;
  --dur-base: 200ms;
  --dur-slow: 340ms;
  --ease-out: cubic-bezier(.22, .8, .28, 1);
  --ease-in-out: cubic-bezier(.5, 0, .3, 1);
  --ease-pop: cubic-bezier(.34, 1.56, .64, 1);
  --lift-hover: translateY(-2px);
  --press-scale: .97;
}

/* Display type steps down on narrow screens so headlines never overflow. */
@media (max-width: 900px) {
  :root {
    --text-hero: 56px;
    --text-display: 40px;
    --script-accent: 34px;
    --gutter-page: 18px;
    --card-pad-lg: 20px;
  }
}

@media (max-width: 520px) {
  :root {
    --text-hero: 44px;
    --text-display: 32px;
    --script-accent: 28px;
  }
}