/* PARLOR FREAKS — Design tokens */

:root {
  /* PARLOR FREAKS palette */
  --pf-yellow: #D8A71A;
  --pf-paper: #F4E8D5;
  --pf-green: #556B2F;
  --pf-red: #B63A2D;
  --pf-black: #1F1F1F;
  --pf-blue: #3E6F95;

  /* Color system (mapped to palette) */
  --color-primary: var(--pf-yellow);
  --color-secondary: var(--pf-black);
  --color-accent: var(--pf-green);
  --color-text: var(--pf-black);
  --color-text-inverse: #FFFFFF;
  --color-text-muted: rgba(31, 31, 31, 0.72);

  --color-bg: var(--pf-paper);
  --color-bg-light: var(--pf-paper);
  --color-bg-dark: var(--pf-black);
  --color-bg-accent: var(--pf-green);
  --color-surface: #FFFFFF;
  --color-border: rgba(31, 31, 31, 0.1);
  --color-border-light: rgba(255, 255, 255, 0.14);

  /* Typography */
  --font-display: "Bebas Neue", "Anton", "Oswald", system-ui, sans-serif;
  --font-hero: var(--font-display);
  --font-title: "Anton", "Archivo Black", system-ui, sans-serif;
  --font-body: "Noto Sans JP", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-script: "Yellowtail", "Segoe Script", cursive;

  /* Spacing system */
  --space-8: 8px;
  --space-16: 16px;
  --space-20: 20px;
  --space-28: 28px;
  --space-24: 24px;
  --space-32: 32px;
  --space-48: 48px;
  --space-64: 64px;
  --space-80: 80px;
  --space-120: 120px;

  /* Layout */
  --container: 1120px;
  --radius-12: 12px;
  --radius-16: 16px;
  --radius-24: 24px;

  /* Shadows */
  --shadow-soft: 0 12px 40px rgba(17, 17, 17, 0.1);
  --shadow-card: 0 8px 28px rgba(17, 17, 17, 0.08);

  /* Motion */
  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
  --dur-150: 150ms;
  --dur-240: 240ms;
  --dur-360: 360ms;

  /* Floating CTA */
  --floating-cta-size: 56px;
  --floating-cta-gap: 16px;
  --floating-cta-safe: calc(var(--floating-cta-size) + var(--floating-cta-gap) + env(safe-area-inset-bottom, 0px));

  /* Header & mobile nav */
  --header-height: 0px;
  --menu-btn-size: 72px;
  --nav-card-height: 90px;
  --nav-card-radius: 28px;
}