/*
 * Elan Deco design tokens — single source of truth.
 *
 * Three layers:
 *   1. raw brand values      never referenced outside this file
 *   2. semantic layer        what components actually use
 *   3. context flip          [data-eld-ctx] swaps the semantic values
 *
 * The raw values come from Phase 1 and do not change. scripts/check-tokens.sh
 * fails the deploy if any other stylesheet reaches past the semantic layer —
 * a block that hardcodes --eld-dark-bg stops responding to the context flip
 * and has to be edited by hand every time a surface changes.
 */

:root {
  /* --- 1. Raw brand values — do not use directly ----------------------- */

  --eld-dark-bg: #101720;
  --eld-dark-bg-2: #18212c;
  --eld-dark-bg-3: #202b38;
  --eld-dark-ink: #f4f7fa;
  --eld-dark-ink-2: #a9b4c0;
  --eld-dark-ink-3: #6e7b8a;
  --eld-dark-accent: #4c9be8;
  --eld-dark-accent-h: #6fb0ee;
  --eld-dark-border: rgba(244, 247, 250, 0.10);
  --eld-dark-border-2: rgba(244, 247, 250, 0.18);

  /*
   * Cool neutrals, not warm ones. The catalogue is aluminium, stainless and
   * PVC; a beige page reads as a spa rather than a supplier, and the product
   * images are photographed on white, which a warm ground visibly fights.
   */
  --eld-light-paper: #ffffff;
  --eld-light-bg: #f6f8fa;
  --eld-light-bg-2: #eceff3;
  --eld-light-bg-3: #dfe4ea;
  --eld-light-ink: #0f1419;
  --eld-light-ink-2: #48535f;
  --eld-light-ink-3: #7d8794;
  --eld-light-accent: #125ca8;
  --eld-light-accent-h: #0e4a87;
  --eld-light-border: rgba(15, 20, 25, 0.12);
  --eld-light-border-2: rgba(15, 20, 25, 0.20);

  /* --- 2. Semantic layer — default context is LIGHT -------------------- */

  --eld-bg: var(--eld-light-bg);
  --eld-bg-2: var(--eld-light-bg-2);
  --eld-bg-3: var(--eld-light-bg-3);
  --eld-ink: var(--eld-light-ink);
  --eld-ink-2: var(--eld-light-ink-2);
  --eld-ink-3: var(--eld-light-ink-3);
  --eld-accent: var(--eld-light-accent);
  --eld-accent-h: var(--eld-light-accent-h);
  --eld-border: var(--eld-light-border);
  --eld-border-2: var(--eld-light-border-2);

  /*
   * The surface a product sits on: always white, in either context, because
   * that is the background the catalogue photographs against. A card that
   * flipped to a dark fill would put a cut-out photo in a black box.
   */
  --eld-paper: var(--eld-light-paper);
  --eld-paper-ink: var(--eld-light-ink);
  --eld-paper-ink-2: var(--eld-light-ink-2);
  --eld-paper-ink-3: var(--eld-light-ink-3);
  --eld-paper-border: var(--eld-light-border);

  /*
   * Text on an accent fill. White on this blue is 6.3:1, so the primary
   * button is a solid fill with white text. The previous gold could not carry
   * white (2.76:1) and had to use dark ink, which is what made the main
   * call to action read as disabled.
   */
  --eld-on-accent: #ffffff;

  /* --- Status ---------------------------------------------------------- */

  --eld-stock-in: #3f7d4f;
  --eld-stock-low: #b8762a;
  --eld-stock-out: #9a9a9a;

  /* Promotions. 4.9:1 on the light surface with white text. */
  --eld-promo: #b4342c;
  --eld-promo-ink: #ffffff;

  --eld-error: #c0392b;
  --eld-success: #3f7d4f;

  /* --- Typography ------------------------------------------------------ */

  /* The *-Fallback families are metric-matched in base.css — listing them
     before the generic keeps text from reflowing when the webfont arrives. */
  --eld-font-display: 'Instrument Serif', 'Instrument Serif Fallback', Georgia, serif;
  --eld-font-body: 'Satoshi', 'Satoshi Fallback', system-ui, -apple-system, sans-serif;
  --eld-font-mono: 'Geist Mono', 'Geist Mono Fallback', ui-monospace, Menlo, monospace;

  --eld-text-micro: 0.6875rem;
  --eld-text-small: 0.8125rem;
  --eld-text-body: 1rem;
  --eld-text-lead: 1.0625rem;

  --eld-text-hero: clamp(2.75rem, 6vw, 4.5rem);
  --eld-text-h1: clamp(2.25rem, 4.5vw, 3.25rem);
  --eld-text-h2: clamp(1.875rem, 3.8vw, 2.75rem);
  --eld-text-h3: clamp(1.375rem, 2.5vw, 1.75rem);

  /*
   * Leading. Every line-height in the theme used to be a literal, so headings
   * and body copy drifted apart file by file and the page read flat.
   */
  --eld-leading-tight: 1.05;
  --eld-leading-snug: 1.25;
  --eld-leading-normal: 1.5;
  --eld-leading-relaxed: 1.7;

  --eld-tracking-tight: -0.025em;
  --eld-tracking-wide: 0.02em;
  --eld-tracking-eyebrow: 0.3em;

  /* --- Spacing — 0.25rem scale ----------------------------------------- */

  --eld-space-1: 0.25rem;
  --eld-space-2: 0.5rem;
  --eld-space-3: 0.75rem;
  --eld-space-4: 1rem;
  --eld-space-5: 1.5rem;
  --eld-space-6: 2rem;
  --eld-space-7: 3rem;
  --eld-space-8: 4rem;

  /* --- Layout ---------------------------------------------------------- */

  --eld-container: 1320px;
  --eld-container-narrow: 760px;
  --eld-gutter: clamp(1rem, 4vw, 2.5rem);

  /* --- Geometry — this brand has exactly two radii ---------------------- */

  --eld-radius: 4px;
  --eld-radius-full: 9999px;
  --eld-control-h: 44px;

  --eld-transition: 200ms ease;
  --eld-ease-out: cubic-bezier(0.16, 1, 0.3, 1);

  /*
   * Z-index scale. Four independent layers can be open at once — sticky
   * header, search autocomplete, mini cart, offcanvas — and ad-hoc numbers
   * collide the moment two of them overlap.
   */
  --eld-z-header: 100;
  --eld-z-dropdown: 200;
  --eld-z-overlay: 290;
  --eld-z-drawer: 300;
}

/*
 * --- 3. Context flip ---------------------------------------------------
 *
 * These selectors ONLY reassign variables. Painting is a separate concern
 * (.eld-surface, or the component's own rule) so a light card can sit inside
 * a dark section without inheriting its background.
 */

[data-eld-ctx='dark'] {
  --eld-bg: var(--eld-dark-bg);
  --eld-bg-2: var(--eld-dark-bg-2);
  --eld-bg-3: var(--eld-dark-bg-3);
  --eld-ink: var(--eld-dark-ink);
  --eld-ink-2: var(--eld-dark-ink-2);
  --eld-ink-3: var(--eld-dark-ink-3);
  --eld-accent: var(--eld-dark-accent);
  --eld-accent-h: var(--eld-dark-accent-h);
  --eld-border: var(--eld-dark-border);
  --eld-border-2: var(--eld-dark-border-2);
  /* The lighter step of the accent needs dark ink to stay legible. */
  --eld-on-accent: var(--eld-dark-bg);
}

[data-eld-ctx='light'] {
  --eld-bg: var(--eld-light-bg);
  --eld-bg-2: var(--eld-light-bg-2);
  --eld-bg-3: var(--eld-light-bg-3);
  --eld-ink: var(--eld-light-ink);
  --eld-ink-2: var(--eld-light-ink-2);
  --eld-ink-3: var(--eld-light-ink-3);
  --eld-accent: var(--eld-light-accent);
  --eld-accent-h: var(--eld-light-accent-h);
  --eld-border: var(--eld-light-border);
  --eld-border-2: var(--eld-light-border-2);
  --eld-on-accent: #ffffff;
}

/* Opt-in painting. */
.eld-surface {
  background-color: var(--eld-bg);
  color: var(--eld-ink-2);
}

.eld-surface--alt { background-color: var(--eld-bg-2); }

/*
 * A white island, whatever the surrounding context. Product media and cards
 * use this so a cut-out photograph always sits on the ground it was shot on.
 */
.eld-paper {
  background-color: var(--eld-paper);
  color: var(--eld-paper-ink-2);
}