/*
 * ELV8 design tokens. Storefront round 6, "Limitless v4".
 *
 * The logo is fully grayscale, so there is no hue to pull. The palette is warm
 * near-black with a cream accent: cream on ink for primary buttons and active
 * states, cream outlines for secondary ones. Contrast on the ink surface:
 *   cream  #EFE8DD  16.3:1   body copy and controls
 *   muted  #CFC8BC  12.0:1   paragraphs
 *   soft   #A39C91   7.4:1   helper text
 *   dim    #8A8378   5.3:1   mono labels (AA for small text)
 *
 * The template token names are kept so the shared components (ContactForm)
 * pick the palette up without edits.
 */

:root {
  color-scheme: dark;

  /* ELV8 palette */
  --ink: #0b0b0a;
  --ink-2: #111110;
  --ink-3: #161614;
  --ink-4: #1a1918;
  --line: #1e1d1a;
  --line-2: #262420;
  --line-3: #3a3732;
  --cream: #efe8dd;
  --cream-hi: #ffffff;
  --muted: #cfc8bc;
  --soft: #a39c91;
  --dim: #8a8378;

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-io: cubic-bezier(0.76, 0, 0.24, 1);

  --font-display: 'Archivo Variable', 'Archivo', system-ui, sans-serif;
  --font-mono: 'Geist Mono Variable', 'Geist Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Page gutter, matching clamp(16px, 2.8cqw, 40px) from the design. */
  --gutter: clamp(16px, 2.8vw, 40px);
  --section-y: clamp(96px, 10vw, 168px);
  --bar-h: 56px;

  /* Template tokens, mapped onto the palette */
  --color-primary: var(--cream);
  --color-primary-strong: var(--cream-hi);
  --color-primary-soft: var(--ink-4);
  --color-on-primary: var(--ink);
  --color-accent: var(--cream);
  --color-accent-strong: var(--cream-hi);
  --color-accent-soft: var(--ink-4);
  --color-on-accent: var(--ink);

  --color-neutral-0: var(--ink);
  --color-neutral-50: var(--ink-2);
  --color-neutral-100: var(--ink-3);
  --color-neutral-200: var(--line-2);
  --color-neutral-300: var(--line-3);
  --color-neutral-400: var(--dim);
  --color-neutral-500: var(--dim);
  --color-neutral-600: var(--soft);
  --color-neutral-700: var(--muted);
  --color-neutral-800: var(--muted);
  --color-neutral-900: var(--cream);
  --color-neutral-950: var(--cream-hi);

  --color-surface: var(--ink);
  --color-surface-sunken: var(--ink-2);
  --color-surface-raised: var(--ink-3);
  --color-surface-inverse: var(--cream);

  --color-text: var(--cream);
  --color-text-muted: var(--soft);
  --color-text-inverse: var(--ink);
  --color-text-inverse-muted: var(--line-3);

  --color-border: var(--line-2);
  --color-border-strong: var(--line-3);
  --color-border-inverse: var(--muted);

  --color-link: var(--cream);
  --color-link-hover: var(--cream-hi);

  --color-success: var(--cream);
  --color-success-soft: var(--ink-4);
  --color-error: #f0b4a4;
  --color-error-soft: #2a1a16;

  --color-rating: var(--cream);
  --color-rating-track: var(--line-3);

  --font-heading: var(--font-display);
  --font-body: var(--font-display);
  --font-weight-heading: 700;
  --font-weight-body: 400;
  --font-weight-emphasis: 600;
  --line-height-heading: 0.9;
  --line-height-body: 1.6;

  --font-size-xs: 0.8125rem;
  --font-size-sm: 0.875rem;
  --font-size-base: 0.9375rem;
  --font-size-lg: 1.125rem;
  --font-size-xl: 1.375rem;
  --font-size-2xl: 1.75rem;
  --font-size-3xl: 2.25rem;

  /* The design is square-cornered throughout. */
  --radius-sm: 0;
  --radius-md: 0;
  --radius-lg: 0;
  --radius-pill: 0;

  --shadow-sm: none;
  --shadow-md: 0 48px 96px rgb(0 0 0 / 0.6);
  --transition: 0.3s ease;

  --container-width: 100%;
  --container-gutter: var(--gutter);

  --focus-ring: 1px solid var(--cream);
  --focus-ring-offset: 3px;
}

@media (min-width: 640px) {
  :root {
    --bar-h: 60px;
  }
}

@media (min-width: 1024px) {
  :root {
    --bar-h: 64px;
  }
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --transition: 0ms;
  }
}