/* ==========================================================================
   Design tokens — the only file that holds raw colours.
   Two themes, switched by <html data-theme="cool|heat"> (header toggle).
   The 3D scenes read the same tokens (via hidden probe elements), so lights,
   rim glow and particles follow the theme.
   Every text pair passes WCAG AA in both themes (see README → Themes).
   ========================================================================== */

/* Registered so the browser can interpolate them: switching theme animates
   every gradient, shadow and color-mix built on top of these. */
@property --color-bg { syntax: "<color>"; inherits: true; initial-value: #0B0F14; }
@property --color-surface { syntax: "<color>"; inherits: true; initial-value: #121923; }
@property --color-surface-2 { syntax: "<color>"; inherits: true; initial-value: #1A2431; }
@property --color-text { syntax: "<color>"; inherits: true; initial-value: #EAF0F6; }
@property --color-text-muted { syntax: "<color>"; inherits: true; initial-value: #9AA8B8; }
@property --color-text-subtle { syntax: "<color>"; inherits: true; initial-value: #8593A3; }
@property --color-accent { syntax: "<color>"; inherits: true; initial-value: #3DD6FF; }
@property --color-accent-alt { syntax: "<color>"; inherits: true; initial-value: #FF8A3D; }
@property --color-cta { syntax: "<color>"; inherits: true; initial-value: #3DD6FF; }
@property --color-cta-hover { syntax: "<color>"; inherits: true; initial-value: #7BE4FF; }
@property --color-on-accent { syntax: "<color>"; inherits: true; initial-value: #0B0F14; }

/* Cool — ice: graphite-blue, cyan light, frost on the edges */
:root,
:root[data-theme="cool"],
[data-theme-probe="cool"] {
  --color-bg: #0B0F14;
  --color-surface: #121923;
  --color-surface-2: #1A2431;
  --color-text: #EAF0F6;
  --color-text-muted: #9AA8B8;
  --color-text-subtle: #8593A3;

  --color-accent: #3DD6FF;        /* theme accent: highlights, focus, 3D glow */
  --color-accent-alt: #FF8A3D;    /* the opposite temperature, used sparingly */
  --color-cta: #3DD6FF;           /* call / request buttons */
  --color-cta-hover: #7BE4FF;
  --color-on-accent: #0B0F14;     /* text on accent / CTA fills */

  /* 3D scene light (read by js/three/common.js) */
  --scene-key: #EAF6FF;
  --scene-fill: #9FD8FF;
  --scene-sky: #BFD9EE;
  --scene-rim: #BFEFFF;
}

/* Heat — fire: warm charcoal, orange light, heat shimmer */
:root[data-theme="heat"],
[data-theme-probe="heat"] {
  --color-bg: #140D0A;
  --color-surface: #1E1410;
  --color-surface-2: #2A1C16;
  --color-text: #F6EDE6;
  --color-text-muted: #C2AE9F;
  --color-text-subtle: #A8907F;

  --color-accent: #FF8A3D;
  --color-accent-alt: #3DD6FF;
  --color-cta: #FF8A3D;
  --color-cta-hover: #FFA466;
  --color-on-accent: #140D0A;

  --scene-key: #FFE3C8;
  --scene-fill: #FFB27A;
  --scene-sky: #F2C9A8;
  --scene-rim: #FF9A55;
}

/* Shared, theme-independent tokens */
:root {
  --color-status-fault: #FFB547;  /* amber "fault detected" lamp in both themes */
  --color-success: #3DDC97;
  --color-error: #FF6B6B;
  --color-brand: #4B9BFF;         /* logo mark only */

  /* light variant for clients who want light sections */
  --color-inverse-bg: #E9EEF3;
  --color-inverse-text: #0B0F14;
  --color-inverse-muted: #45505C;
  --color-product-bg: #FFFFFF;    /* product photos are shot on white */

  --color-border: color-mix(in srgb, var(--color-text) 13%, transparent);
  --color-border-strong: color-mix(in srgb, var(--color-text) 30%, transparent);
  --color-inverse-border: color-mix(in srgb, var(--color-inverse-text) 15%, transparent);
  --color-scrim: color-mix(in srgb, var(--color-bg) 70%, transparent);
  --color-accent-soft: color-mix(in srgb, var(--color-accent) 14%, transparent);
  --color-focus: var(--color-accent);
  --glow: 0 0 28px color-mix(in srgb, var(--color-accent) 45%, transparent);
  --glow-cta: 0 0 28px color-mix(in srgb, var(--color-cta) 45%, transparent);

  --font-display: "Archivo", "Arial Narrow", system-ui, sans-serif;
  --font-body: "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-serif: "Instrument Serif", Georgia, serif;
  --font-mono: ui-monospace, "SFMono-Regular", "Cascadia Mono", Consolas, monospace;

  --radius-pill: 999px;
  --pad: clamp(20px, 3.4vw, 56px);
  --callbar-h: 0px;
  --theme-dur: 0.5s;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-io: cubic-bezier(0.65, 0, 0.35, 1);
}

/* Theme switch: the registered colours interpolate for 0.5 s */
:root.is-theming {
  transition:
    --color-bg var(--theme-dur) var(--ease-io), --color-surface var(--theme-dur) var(--ease-io),
    --color-surface-2 var(--theme-dur) var(--ease-io), --color-text var(--theme-dur) var(--ease-io),
    --color-text-muted var(--theme-dur) var(--ease-io), --color-text-subtle var(--theme-dur) var(--ease-io),
    --color-accent var(--theme-dur) var(--ease-io), --color-accent-alt var(--theme-dur) var(--ease-io),
    --color-cta var(--theme-dur) var(--ease-io), --color-cta-hover var(--theme-dur) var(--ease-io),
    --color-on-accent var(--theme-dur) var(--ease-io);
}