/*
 * Levy & Loom design tokens (generated from tokens.json; keep the two in sync).
 * Light theme is the default; dark theme applies with `prefers-color-scheme`
 * unless [data-theme="light"] is set, and always with [data-theme="dark"].
 */

:root {
  /* Core palette */
  --ll-charcoal-ink: #121314;
  --ll-warm-alabaster: #F7F4EF;
  --ll-terracotta-rose: #D96B50;
  --ll-terracotta-deep: #B5462E;
  --ll-terracotta-tint: #F6DED5;
  --ll-ink-muted: #5C5F63;
  --ll-ink-hairline: #DCD7CF;
  --ll-ink-raised: #1C1D1F;
  --ll-ink-hairline-dark: #2A2C2F;
  --ll-alabaster-muted: #B8B4AD;
  --ll-status-active: #3E7C59;
  --ll-status-past-due: #B8860B;
  --ll-status-canceled: #8A2E2E;

  /* Semantic (light) */
  --ll-bg: var(--ll-warm-alabaster);
  --ll-surface: #FFFFFF;
  --ll-fg: var(--ll-charcoal-ink);
  --ll-fg-muted: var(--ll-ink-muted);
  --ll-border: var(--ll-ink-hairline);
  --ll-accent: var(--ll-terracotta-rose);
  --ll-accent-text: var(--ll-terracotta-deep);
  --ll-accent-tint: var(--ll-terracotta-tint);
  --ll-on-accent: var(--ll-warm-alabaster);
  --ll-focus: var(--ll-terracotta-rose);

  /* Typography */
  --ll-font-heading: "Playfair Display", Georgia, "Times New Roman", serif;
  --ll-font-app: "Plus Jakarta Sans", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --ll-font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --ll-text-display: 600 3.5rem/1.05 var(--ll-font-heading);
  --ll-text-h1: 600 2.5rem/1.1 var(--ll-font-heading);
  --ll-text-h2: 600 1.875rem/1.2 var(--ll-font-heading);
  --ll-text-h3: 500 1.375rem/1.3 var(--ll-font-heading);
  --ll-text-stat: 600 2.25rem/1.1 var(--ll-font-heading);
  --ll-text-body-lg: 400 1.125rem/1.6 var(--ll-font-app);
  --ll-text-body: 400 1rem/1.6 var(--ll-font-app);
  --ll-text-body-sm: 400 0.875rem/1.5 var(--ll-font-app);
  --ll-text-label: 600 0.75rem/1.4 var(--ll-font-app);
  --ll-text-button: 600 0.9375rem/1 var(--ll-font-app);

  --ll-tracking-display: -0.02em;
  --ll-tracking-h1: -0.015em;
  --ll-tracking-h2: -0.01em;
  --ll-tracking-label: 0.08em;

  /* Spacing, radius, elevation, motion */
  --ll-space-1: 0.25rem;
  --ll-space-2: 0.5rem;
  --ll-space-3: 0.75rem;
  --ll-space-4: 1rem;
  --ll-space-5: 1.5rem;
  --ll-space-6: 2rem;
  --ll-space-7: 3rem;
  --ll-space-8: 4rem;
  --ll-space-9: 6rem;

  --ll-radius-sm: 4px;
  --ll-radius-md: 8px;
  --ll-radius-lg: 14px;
  --ll-radius-pill: 999px;

  --ll-shadow-raised: 0 1px 2px rgba(18, 19, 20, 0.06), 0 4px 16px rgba(18, 19, 20, 0.08);
  --ll-shadow-overlay: 0 12px 40px rgba(18, 19, 20, 0.18);

  --ll-motion-fast: 120ms;
  --ll-motion-base: 200ms;
  --ll-motion-slow: 360ms;
  --ll-ease: cubic-bezier(0.2, 0, 0, 1);

  --ll-max-content: 72rem;
  --ll-gutter: 1rem;

  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ll-bg: var(--ll-charcoal-ink);
    --ll-surface: var(--ll-ink-raised);
    --ll-fg: var(--ll-warm-alabaster);
    --ll-fg-muted: var(--ll-alabaster-muted);
    --ll-border: var(--ll-ink-hairline-dark);
    --ll-accent-text: var(--ll-terracotta-rose);
    --ll-accent-tint: rgba(217, 107, 80, 0.16);
    --ll-shadow-raised: 0 1px 2px rgba(0, 0, 0, 0.4), 0 4px 16px rgba(0, 0, 0, 0.5);
  }
}

:root[data-theme="dark"] {
  --ll-bg: var(--ll-charcoal-ink);
  --ll-surface: var(--ll-ink-raised);
  --ll-fg: var(--ll-warm-alabaster);
  --ll-fg-muted: var(--ll-alabaster-muted);
  --ll-border: var(--ll-ink-hairline-dark);
  --ll-accent-text: var(--ll-terracotta-rose);
  --ll-accent-tint: rgba(217, 107, 80, 0.16);
  --ll-shadow-raised: 0 1px 2px rgba(0, 0, 0, 0.4), 0 4px 16px rgba(0, 0, 0, 0.5);
}

@media (min-width: 48rem) {
  :root { --ll-gutter: 2rem; }
}

/* Base element hierarchy */
body {
  margin: 0;
  background: var(--ll-bg);
  color: var(--ll-fg);
  font: var(--ll-text-body);
  -webkit-font-smoothing: antialiased;
}

h1, .ll-h1 { font: var(--ll-text-h1); letter-spacing: var(--ll-tracking-h1); margin: 0 0 var(--ll-space-4); }
h2, .ll-h2 { font: var(--ll-text-h2); letter-spacing: var(--ll-tracking-h2); margin: 0 0 var(--ll-space-3); }
h3, .ll-h3 { font: var(--ll-text-h3); margin: 0 0 var(--ll-space-2); }
.ll-display { font: var(--ll-text-display); letter-spacing: var(--ll-tracking-display); }
.ll-label { font: var(--ll-text-label); letter-spacing: var(--ll-tracking-label); text-transform: uppercase; color: var(--ll-fg-muted); }
.ll-mono { font-family: var(--ll-font-mono); font-variant-numeric: tabular-nums; }

a { color: var(--ll-accent-text); text-decoration-thickness: 1px; text-underline-offset: 0.15em; }
:focus-visible { outline: 2px solid var(--ll-focus); outline-offset: 2px; }

/* Logo and icon sizing: SVGs scale to their container while keeping aspect. */
.ll-logo, .ll-logo-mark, .ll-pour-icon { display: inline-block; height: auto; max-width: 100%; vertical-align: middle; }
.ll-logo { width: clamp(140px, 30vw, 280px); }
.ll-logo-mark { width: clamp(24px, 6vw, 48px); }
.ll-pour-icon { width: 1.25em; }

@media (prefers-reduced-motion: reduce) {
  :root { --ll-motion-fast: 0ms; --ll-motion-base: 0ms; --ll-motion-slow: 0ms; }
}