/* ==========================================================================
   KyperX design tokens — THE ONLY FILE THAT MAY CONTAIN COLOUR VALUES.
   Loaded first on every page. Every other stylesheet, script and SVG uses
   var(--token) or currentColor; transparency uses
   color-mix(in srgb, var(--token) N%, transparent).

   The palette is the shared KyperX system (Energy & Industry V2). Identity is
   set on <html data-site="corporate|ai|capital">; the differences between the
   sites live in the [data-site] blocks at the end of this file and nowhere
   else. assets/js/scene/concept-scene.js reads the --scene-* properties at
   runtime and re-reads them when data-theme or data-site changes.
   ========================================================================== */

:root {
  /* ---- Ground ---------------------------------------------------------- */
  --graphite: #0b1118;
  --graphite-2: #0f1720;
  --midnight: #142334;
  --midnight-2: #1a2c41;
  --midnight-deep: #0e1a27;
  --glow: #15263a;
  --glass: #0f1720;
  --glass-hi: #0d2130;

  /* ---- Reading surfaces ------------------------------------------------ */
  --white: #f4f6f7;
  --paper: #fbfcfc;
  --surface-pure: #ffffff;
  --btn-primary-hover: #ffffff;

  /* ---- Text ------------------------------------------------------------ */
  --ink: #0b1118;
  --ink-2: #3a4855;
  --ink-3: #5f6e7b;
  --on-dark: #eef2f5;
  --on-dark-2: #c5cfd8;
  --on-dark-3: #97a6b3;
  --on-dark-strong: #ffffff;
  --steel: #8a9aa8;
  --steel-2: #5d6d7c;

  /* ---- Flow identity: electricity, hydrogen, material ------------------- */
  /* On kyperx.com these also mark the two focus areas: cyan Intelligent
     Systems, amber Energy & Industry, as on the live site. */
  --cyan: #46bfe8;
  --violet: #aa98ef;
  --amber: #e6b76e;
  --cyan-ink: #1f9cc8;
  --violet-ink: #7d68d8;
  --amber-ink: #c48a2c;
  --cyan-text: #1683ab;
  --violet-text: #6a55c8;
  --amber-text: #8a5a12;
  --cyan-wash: #eaf6fb;

  /* ---- Site accent: what separates this site from its subdomains -------- */
  /* Corporate is structural: the accent is the ground's own light. */
  --accent: #eef2f5;
  --accent-ink: #0b1118;
  --accent-contrast: #0b1118;

  /* ---- Feedback -------------------------------------------------------- */
  --error: #a32020;
  --notice-bg: #f3e7c9;
  --notice-fg: #4a3a12;

  /* ---- Shadow and absolute values -------------------------------------- */
  --shadow: #000000;
  --pure-black: #000000;

  /* ---- Rules ----------------------------------------------------------- */
  --rule-light: color-mix(in srgb, var(--ink) 12%, transparent);
  --rule-dark: color-mix(in srgb, var(--on-dark) 12%, transparent);

  /* ---- 3D concept scene (read at runtime by concept-scene.js) ----------- */
  --scene-cyan: #46bfe8;
  --scene-violet: #aa98ef;
  --scene-amber: #e6b76e;
  --scene-fog: #172433;
  --scene-sky-top: #05080d;
  --scene-sky-mid: #0d1825;
  --scene-sky-horizon: #223345;
  --scene-sky-glow: #4f4334;
  --scene-hemi-sky: #8fb2d6;
  --scene-hemi-ground: #0b1118;
  --scene-sun: #ffdcbc;
  --scene-fill: #8aa8cc;
  --scene-ground: #131d28;
  --scene-grid: #8a9aa8;
  --scene-hill: #162230;
  --scene-steel: #7f8f9d;
  --scene-dark-steel: #2a3440;
  --scene-concrete: #323e4a;
  --scene-white: #c3cad1;
  --scene-turbine: #c9d1d8;
  --scene-tank: #d2d8de;
  --scene-ore: #2a2828;
  --scene-accent-base: #0a0f14;
  --scene-furnace: #ffb066;
  --scene-solar-cell: #24406b;
  --scene-bess-a: #3a4652;
  --scene-bess-b: #323d48;
  --scene-clad-light-a: #9eabb6;
  --scene-clad-light-b: #909da8;
  --scene-clad-dark-a: #29343f;
  --scene-clad-dark-b: #232d37;

  /* ---- Type (not colour, shared across the family) --------------------- */
  --font-sans: "Geist", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "Geist Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  /* ---- Layout ---------------------------------------------------------- */
  --page-max: 1520px;
  --gutter: 56px;
  --header-h: 76px;
  --radius: 4px;
  --radius-lg: 10px;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
}

/* ==========================================================================
   Subdomain identities. Overrides only: no component stylesheet ever branches
   on the site. Each subdomain changes its accent and the signal colour of the
   scene; the ground, type, spacing and components stay the same, so the family
   reads as one company while a change of site is unmistakable.
   ========================================================================== */

/* ai.kyperx.com — Intelligent Systems. Signal blue leads. */
[data-site="ai"] {
  --accent: #46bfe8;
  --accent-ink: #1f9cc8;
  --accent-contrast: #0b1118;
  --glow: #103349;
  --scene-sky-glow: #1f4a63;
  --scene-sun: #e2ecf6;
}

/* capital.kyperx.com — public-markets investment. Brass leads. */
[data-site="capital"] {
  --accent: #e6b76e;
  --accent-ink: #c48a2c;
  --accent-contrast: #0b1118;
  --glow: #2a2516;
  --scene-sky-glow: #6a5236;
}

/* ==========================================================================
   Light theme. The system is dark by default, as on energy.kyperx.com; a page
   set to data-theme="light" re-points the ground tokens and the scene reads
   the new values immediately.
   ========================================================================== */
[data-theme="light"] {
  color-scheme: light;
  --graphite: #eef1f3;
  --graphite-2: #e6eaee;
  --midnight: #dde3e9;
  --midnight-2: #d4dce3;
  --midnight-deep: #f4f6f7;
  --glow: #cfd8e0;
  --glass: #e9edf1;
  --glass-hi: #dfe6ec;
  --on-dark: #0b1118;
  --on-dark-2: #3a4855;
  --on-dark-3: #5f6e7b;
  --on-dark-strong: #0b1118;
  --accent: #0b1118;
  --accent-contrast: #ffffff;
  --cyan: #1f9cc8;
  --violet: #7d68d8;
  --amber: #c48a2c;
  --rule-dark: color-mix(in srgb, var(--ink) 14%, transparent);
  --scene-fog: #e3e9ee;
  --scene-sky-top: #c9d6e0;
  --scene-sky-mid: #dde6ed;
  --scene-sky-horizon: #eef2f5;
  --scene-sky-glow: #f0e3d0;
  --scene-hemi-sky: #ffffff;
  --scene-hemi-ground: #c2ccd4;
  --scene-sun: #fff4e6;
  --scene-fill: #d6e4f0;
  --scene-ground: #dde3e8;
  --scene-grid: #7f8f9d;
  --scene-hill: #ccd5dc;
  --scene-steel: #a9b5be;
  --scene-dark-steel: #6f7c87;
  --scene-concrete: #c6ced5;
  --scene-white: #f2f5f7;
  --scene-turbine: #eef2f5;
  --scene-tank: #e7ecf0;
  --scene-ore: #8c8d8e;
  --scene-accent-base: #0b1118;
  --scene-furnace: #d2762a;
  --scene-solar-cell: #3c5a86;
  --scene-bess-a: #c8d0d7;
  --scene-bess-b: #bcc5cd;
  --scene-clad-light-a: #eaeef1;
  --scene-clad-light-b: #dde3e8;
  --scene-clad-dark-a: #9aa6b0;
  --scene-clad-dark-b: #8d9aa4;
}

/* Solar-cell texture, drawn to a canvas by the scene module. */
:root {
  --scene-cell-grid: color-mix(in srgb, #96b4dc 22%, transparent);
  --scene-cell-frame: color-mix(in srgb, #c8d4e0 60%, transparent);
}
[data-theme="light"] {
  --scene-cell-grid: color-mix(in srgb, #5a7ba8 22%, transparent);
  --scene-cell-frame: color-mix(in srgb, #46617f 60%, transparent);
}

/* ==========================================================================
   Visual direction experiment (2026-10-08). Scene tokens for the corporate
   method scene and the AI layer scenes. Copied from the corporate V2 tokens
   above; these additions are the only new colour values in the experiment.
   ========================================================================== */
:root {
  --scene-plinth: #16202b;
  --scene-plinth-edge: #2c3946;
  --scene-slab: #17222e;
  --scene-slab-edge: #5d6d7c;
  --scene-glass: #8fb2d6;
  --scene-rack: #1d2731;
  --scene-record: #34424f;
  --scene-record-hi: #a9b6c1;
  --scene-question: #97a6b3;
  --scene-set-aside: #222b35;
  --scene-human: #eef2f5;
  --scene-provider: #6c7c8b;
  --scene-provider-route: #a3b0bc;
  --scene-boundary: #c5cfd8;
}
[data-theme="light"] {
  --scene-plinth: #d4dce3;
  --scene-plinth-edge: #aab6c0;
  --scene-slab: #e3e9ee;
  --scene-slab-edge: #7f8f9d;
  --scene-rack: #bcc5cd;
  --scene-record: #c6ced5;
  --scene-record-hi: #6f7c87;
  --scene-question: #5f6e7b;
  --scene-set-aside: #c6ced5;
  --scene-human: #0b1118;
  --scene-provider: #8693a0;
  --scene-provider-route: #5d6b78;
  --scene-boundary: #3a4855;
}

:root{--font-sans:var(--d);--font-mono:var(--m);}