/* Pylon Elemental design system (redesign 2026-09-24).
   Loads after the brand tokens (theme.css, --pe-*) and before base.css. Every colour here is
   DERIVED from --pe-* so brand options A, B and C all inherit the same system.
   Brief: _design_research/DESIGN_BRIEF.md section (b). */

/* Typed properties so the holo shine and tilt can tween. */
@property --px { syntax: "<percentage>"; inherits: true; initial-value: 50%; }
@property --py { syntax: "<percentage>"; inherits: true; initial-value: 50%; }
@property --rx { syntax: "<angle>"; inherits: true; initial-value: 0deg; }
@property --ry { syntax: "<angle>"; inherits: true; initial-value: 0deg; }
@property --hyp { syntax: "<number>"; inherits: true; initial-value: 0; }
@property --hero-glow { syntax: "<color>"; inherits: true; initial-value: #ff6a2b; }

:root {
  /* ---- type ---- */
  --pe-font-ui: var(--pe-font-body);
  --fs-display: clamp(3rem, 1.5rem + 4.3vw, 6.4rem);
  --fs-display-2: clamp(2.4rem, 1.5rem + 3.6vw, 4.75rem);
  --fs-h1: clamp(2rem, 1.4rem + 2.6vw, 3.5rem);
  --fs-h2: clamp(1.5rem, 1.15rem + 1.5vw, 2.35rem);
  --fs-h3: 1.25rem;
  --fs-price: clamp(2.25rem, 1.8rem + 1.6vw, 3rem);
  --fs-body: 1.0625rem;
  --fs-sm: 0.875rem;
  --fs-xs: 0.8125rem;
  --fs-eyebrow: 0.75rem;
  --lh-tight: 1.05;
  --track-display: -0.035em;
  --track-h: -0.022em;
  --display-transform: none;
  --display-weight: 800;

  /* ---- space (4 px base) ---- */
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px;
  --sp-6: 32px; --sp-7: 48px; --sp-8: 64px; --sp-9: 96px; --sp-10: 128px;
  --section-y: clamp(64px, 8vw, 128px);
  --gutter-x: clamp(16px, 4vw, 48px);
  --content-max: 1280px;
  --gap: clamp(16px, 2vw, 28px);
  --hdr-h: 60px;

  /* ---- radii ---- */
  --r-xs: 6px; --r-sm: 10px; --r-md: 16px; --r-lg: 24px; --r-xl: 32px; --r-pill: 999px;

  /* ---- colour (derived) ---- */
  --bg: var(--pe-bg);
  --bg-2: color-mix(in oklab, var(--pe-surface-2) 55%, var(--pe-bg));
  --surface-1: var(--pe-surface);
  --surface-2: var(--pe-surface-2);
  --pe-bg-elevated: var(--pe-surface);
  --pe-stage: color-mix(in oklab, var(--pe-surface-2) 70%, var(--pe-bg));
  --pe-hairline: color-mix(in oklab, var(--pe-text) 11%, transparent);
  --pe-hairline-2: color-mix(in oklab, var(--pe-text) 18%, transparent);
  --text: var(--pe-text);
  --text-2: var(--pe-text-muted);
  --glass: color-mix(in oklab, var(--pe-bg) 72%, transparent);
  --glass-strong: color-mix(in oklab, var(--pe-bg) 86%, transparent);
  --scrim: color-mix(in oklab, var(--pe-text) 55%, transparent);
  --glow: var(--pe-accent);
  --glow-safe: var(--glow);
  --glow-pct: 40%;
  --glow-pct-lo: 18%;
  --room: var(--pe-accent);
  /* accent used as TEXT: pulled toward the text colour in light mode so it holds 4.5:1 on every brand */
  --link: color-mix(in oklab, var(--pe-accent) 58%, var(--pe-text));

  /* ---- elevation ---- */
  --e0: none;
  --e1: 0 0 0 1px var(--pe-hairline);
  --e2: 0 1px 2px rgb(0 0 0 / .06), 0 8px 24px -8px rgb(0 0 0 / .18);
  --e3: 0 2px 4px rgb(0 0 0 / .06), 0 24px 48px -16px rgb(0 0 0 / .28);

  /* ---- motion ---- */
  --t-press: 120ms;
  --t-hover: 200ms;
  --t-panel: 320ms;
  --t-page: 450ms;
  --t-reveal: 700ms;
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);
  --ease-spring: var(--ease-out);

  color-scheme: light;
}

@supports (transition-timing-function: linear(0, 1)) {
  :root { --ease-spring: linear(0, .5 7%, .93 18%, 1.05 27%, 1.01 38%, 1); }
}

/* Lift very dark dominant colours so every item still glows (relative colour syntax). */
@supports (color: oklch(from red l c h)) {
  :root, [style*="--glow"] { --glow-safe: oklch(from var(--glow) max(l, 0.66) max(c, 0.1) h); }
}

/* ---- dark shell (the default look) ----
   Deeper than the brand's own dark bg so cutouts and holos glow like a StockX / Apple stage. */
:root[data-theme="dark"] {
  --bg: color-mix(in oklab, var(--pe-bg) 58%, black);
  --bg-2: color-mix(in oklab, var(--pe-bg) 82%, black);
  --surface-1: color-mix(in oklab, var(--pe-surface) 70%, black);
  --surface-2: color-mix(in oklab, var(--pe-surface) 88%, var(--pe-text));
  --pe-bg-elevated: color-mix(in oklab, var(--pe-surface) 92%, var(--pe-text));
  --pe-stage: color-mix(in oklab, var(--pe-surface) 78%, black);
  --pe-hairline: color-mix(in oklab, var(--pe-text) 10%, transparent);
  --pe-hairline-2: color-mix(in oklab, var(--pe-text) 17%, transparent);
  --glass: color-mix(in oklab, var(--bg) 70%, transparent);
  --glass-strong: color-mix(in oklab, var(--bg) 84%, transparent);
  --scrim: rgb(0 0 0 / .72);
  --link: var(--pe-accent);
  --glow-pct: 62%;
  --glow-pct-lo: 28%;
  --e2: 0 1px 0 0 color-mix(in oklab, var(--pe-text) 6%, transparent) inset, 0 12px 32px -12px rgb(0 0 0 / .6);
  --e3: 0 0 0 1px var(--pe-hairline), 0 24px 60px -20px color-mix(in oklab, var(--glow-safe) 45%, transparent);
  color-scheme: dark;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]):not([data-theme="dark"]) {
    --bg: color-mix(in oklab, var(--pe-bg) 58%, black);
    --surface-1: color-mix(in oklab, var(--pe-surface) 70%, black);
    --pe-stage: color-mix(in oklab, var(--pe-surface) 78%, black);
    color-scheme: dark;
  }
}

/* ---- room accents (department wash, active nav underline, bento tint) ----
   Card Room = AETHER violet, Collect & Display = GOLD, Gaming Gear = NEON, Forge Originals = FORGE ember.
   Derived from the brand so option B and C shift with it; the hue is the room's. */
[data-room="card-room"]       { --room: oklch(0.72 0.17 300); --room-2: oklch(0.78 0.12 220); }
[data-room="collect-display"] { --room: oklch(0.80 0.13 80);  --room-2: oklch(0.70 0.14 40); }
[data-room="gaming-gear"]     { --room: oklch(0.80 0.15 200); --room-2: oklch(0.70 0.22 340); }
[data-room="rebooted"]        { --room: oklch(0.80 0.14 165); --room-2: oklch(0.72 0.12 200); }
[data-room="forge-originals"] { --room: oklch(0.72 0.19 45);  --room-2: oklch(0.62 0.21 25); }

/* ---- brand-specific tuning of the display face ---- */
[data-brand="a"] { --display-transform: uppercase; --track-display: -0.01em; --lh-tight: 0.92; --display-weight: 800; }
[data-brand="b"] { --track-display: -0.03em; --display-weight: 600; }
[data-brand="c"] {
  --fs-display: clamp(1.55rem, 0.9rem + 2.3vw, 2.85rem);
  --fs-display-2: clamp(1.25rem, 0.85rem + 1.5vw, 2.1rem);
  --track-display: 0; --lh-tight: 1.25; --display-weight: 400;
}

/* ---- reduced motion: one global switch ---- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}