/* Eliz Fan — wireframe prototype */

:root {
  /* Light ground; type, rules, and accent = dark burgundy wine */
  --bg: #f7f6f4;
  --bg-rgb: 247, 246, 244;
  --fg: #391f27;
  --fg-rgb: 57, 31, 39;
  /* Same as --fg: all UI copy + chrome type reads as solid dark burgundy */
  --muted: #391f27;
  --line: #391f27;
  /* Same hue as --line; use in rgba() for hairlines on photos / glass */
  --line-rgb: 57, 31, 39;
  --border: var(--line);
  --surface: #ebe8e4;
  --elevated: #faf8f5;
  --accent: #391f27;
  --accent-rgb: 57, 31, 39;
  /* Deeper wine red for home editorial copy */
  --editorial: #2e1520;
  /* Off-whites for controls on photography (not pure #fff — Impeccable / DS) */
  --paper: #f7f4f0;
  --paper-rgb: 247, 244, 240;

  /* Taller bar: wordmark stacked under logo */
  --header-h: clamp(5.25rem, 12vw, 6.25rem);
  --header-text: 12px;
  --font: "Times New Roman", Times, serif;
  --font-body: var(--font);
  --font-sans: "Times New Roman", Times, serif;
  --weight: 300;
  --ease: cubic-bezier(0.25, 0.1, 0.25, 1);
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-fast: 0.18s;
  --dur-med: 0.32s;
  --radius-sm: 3px;
  --radius-pill: 999px;
  --shadow-sm: 0 1px 0 var(--line);
  --shadow-card: 0 16px 48px rgba(var(--fg-rgb), 0.06);
  --focus-ring: 2px solid var(--accent);
  /* Product card thumbnails: portrait frame + crossfade */
  --product-thumb-aspect: 5 / 7;
  --product-thumb-fade: 0.45s;
  --product-thumb-ease: cubic-bezier(0.4, 0, 0.2, 1);
  --product-card-lift: -2px;
  /* Home hero: landscape band (see .hero aspect-ratio in hero-home.css) */
  --hero-aspect: 21 / 9;
  --hero-max-height: min(72vh, 50rem);

  /* Layout rhythm */
  --wrap-max: 78rem;
  --pad-x: clamp(2rem, 7.5vw, 4.25rem);
  /* Tight inline / chip groups (toolbars, filters, dot navs) */
  --gap-col: 0.5rem;
  /* Grids: tight row (vertical) spacing */
  --gap-v: 0.4rem;
  /* Grids: column (horizontal) spacing between tracks */
  --gap-h: 0.5rem;
  --section-y: clamp(4.5rem, 11vw, 7.5rem);
  --read-max: 44rem;
  --editorial-inset: 10%;
  --underline-thickness: 1px;

  /*
   * Type scale — production pass: all tiers 1rem; stepped scale returns in tokens later.
   */
  --text-xs: 1rem;
  --text-sm: 1rem;
  --text-ui: 1rem;
  --text-base: 1.2rem;
  --text-lede: 1rem;
  --text-lg: 1rem;
  --text-xl: 1rem;
  --text-2xl: 1rem;
  --text-hero: 1rem;
  --text-display: 1rem;
}

@supports (color: oklch(0% 0 0)) {
  :root {
    --bg: oklch(0.97 0.006 85);
    --fg: oklch(0.255 0.055 355);
    --fg-rgb: 57, 31, 39;
    --muted: var(--fg);
    --line: oklch(0.255 0.055 355);
    --line-rgb: 57, 31, 39;
    --border: var(--line);
    --surface: oklch(0.93 0.012 80);
    --elevated: oklch(0.985 0.006 88);
    --accent: oklch(0.255 0.055 355);
    --accent-rgb: 57, 31, 39;
    --editorial: oklch(0.22 0.07 355);
    --bg-rgb: 247, 245, 242;
    --paper: oklch(0.99 0.006 90);
    --paper-rgb: 252, 250, 247;
  }
}