/* Hallmark · tokens — Estudio QR · theme: Midnight (atmospheric) */
/* paper-band: dark · display-style: geometric-sans · accent-hue: warm (coral ~35°) */
:root {
  color-scheme: dark;
  /* Color */
  --color-paper: oklch(16% 0.012 60);
  --color-paper-2: oklch(20% 0.014 60);
  --color-paper-3: oklch(24% 0.016 60);
  --color-ink: oklch(94% 0.008 60);
  --color-ink-soft: oklch(74% 0.012 60);
  --color-ink-faint: oklch(56% 0.012 60);
  --color-accent: oklch(74% 0.16 35);
  --color-accent-strong: oklch(66% 0.19 30);
  --color-accent-ink: oklch(22% 0.05 35);
  --color-bloom-a: oklch(45% 0.14 35);
  --color-bloom-b: oklch(40% 0.12 340);
  --color-line: oklch(32% 0.014 60);
  --color-focus: oklch(78% 0.15 35);
  --color-danger: oklch(66% 0.19 25);
  --color-success: oklch(72% 0.14 150);
  --color-qr-card: oklch(97% 0.004 80);

  /* Type */
  --font-display: 'Space Grotesk', system-ui, sans-serif;
  --font-body: 'Inter', system-ui, sans-serif;
  --text-xs: 0.75rem;
  --text-sm: 0.85rem;
  --text-base: 0.95rem;
  --text-md: 1.1rem;
  --text-lg: 1.35rem;
  --text-display: clamp(2rem, 4.5vw + 0.5rem, 3.4rem);

  /* Space — 4pt scale */
  --space-2xs: 0.25rem;
  --space-xs: 0.5rem;
  --space-sm: 0.75rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2.5rem;
  --space-2xl: 4rem;

  /* Shape & depth */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 18px;
  --radius-pill: 999px;
  --rule-hair: 1px solid var(--color-line);
  --shadow-lift: 0 2px 8px oklch(0% 0 0 / 0.25);
  --shadow-glow: 0 8px 40px oklch(45% 0.14 35 / 0.25);

  /* Motion */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in: cubic-bezier(0.7, 0, 0.84, 0);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 140ms;
  --dur-base: 220ms;
  --dur-slow: 500ms;
}

/* ---------- Tema claro ---------- */
:root[data-theme="light"] {
  color-scheme: light;
  --color-paper: oklch(97% 0.006 80);
  --color-paper-2: oklch(100% 0 0);
  --color-paper-3: oklch(94% 0.008 80);
  --color-ink: oklch(24% 0.015 60);
  --color-ink-soft: oklch(44% 0.015 60);
  --color-ink-faint: oklch(60% 0.012 60);
  --color-accent: oklch(66% 0.19 30);
  --color-accent-strong: oklch(58% 0.2 28);
  --color-accent-ink: oklch(99% 0.005 80);
  --color-bloom-a: oklch(90% 0.05 40);
  --color-bloom-b: oklch(91% 0.04 340);
  --color-line: oklch(88% 0.01 80);
  --color-focus: oklch(58% 0.18 30);
  --color-danger: oklch(54% 0.2 25);
  --color-success: oklch(52% 0.14 150);
  --color-qr-card: oklch(100% 0 0);
  --shadow-lift: 0 2px 8px oklch(30% 0.02 60 / 0.12);
  --shadow-glow: 0 8px 40px oklch(60% 0.12 35 / 0.22);
}