/* theme.css — dark / light theme system layered over Framer's token palette.
 *
 * Framer defines ~30 color tokens on `body`. Several are "poles" (#000 ink, #fff
 * paper) whose ROLE flips per page: on dark-base pages ink=background & paper=text;
 * on light-base pages it's reversed. So we remap every Framer token to a semantic
 * var, scoping the poles by the page's base class (.base-dark / .base-light), and
 * define the semantic vars per mode. Dark-mode values equal the originals, so the
 * current look is unchanged; light mode uses warm FT "paper" tones. Brand purple
 * accent is kept in both modes.
 */

:root {
  /* DARK mode (default) — values match the original Framer palette exactly */
  --c-bg: #000;
  --c-text: #fff;
  --c-surface: #272727; /* elevated cards */
  --c-surface-2: #101012; /* subtle section bands */
  --c-muted: #888;
  --c-muted-2: #bdbdbd;
  --c-muted-3: #8b959e;
  --c-line: #25272e; /* solid hairlines */
  --c-border: rgba(230, 237, 249, 0.1); /* translucent hairlines */
  --c-border-2: rgba(255, 255, 255, 0.03);
  --c-accent: #7c3aed;
  --c-accent-2: #7a4dce;
  --c-sell: #ff3030;
  --c-buy: #5da91a;
  color-scheme: dark;
}

html[data-theme='light'] {
  /* LIGHT mode — brand purple kept. FT paper page, white cards (FT-style) */
  --c-bg: #fff1e5; /* page background — FT paper */
  --c-text: #33302e; /* FT ink */
  --c-surface: #ffffff; /* elevated cards — white */
  --c-surface-2: #ffffff; /* white */
  --c-muted: #6e655c;
  --c-muted-2: #8a817a;
  --c-muted-3: #7c7570;
  --c-line: #e7d8c8; /* warm hairline */
  --c-border: rgba(51, 48, 46, 0.14);
  --c-border-2: rgba(51, 48, 46, 0.05);
  --c-accent: #7c3aed;
  --c-accent-2: #7a4dce;
  --c-sell: #c0392b;
  --c-buy: #4b8b1a;
  color-scheme: light;
}

/* ---- token -> semantic (roles consistent across both bases) ---- */
body.base-dark,
body.base-light {
  --token-306b3dc6-699e-43fa-8287-e36e9a8f6c7c: var(--c-surface);
  --token-67a4a622-83b6-48dc-9695-e606de9c96eb: var(--c-surface-2);
  --token-10b87a0d-72ad-4d34-b112-7eaee815e1dd: var(--c-line);
  --token-ddb19d82-885f-4901-a498-0abb289fc7c4: var(--c-line);
  --token-36b69f4f-282a-43da-a87e-62960b3be608: var(--c-muted);
  --token-3e3a0a8f-137c-4573-9144-6944d559bab9: var(--c-muted);
  --token-7fe706d6-e066-44cd-8368-c485db47cdbe: var(--c-muted);
  --token-2b251d1a-1f4b-4a69-a732-82143f0b61ec: var(--c-muted-3);
  --token-6e6b9062-2d1a-4ac0-8f0d-b13b93e0ac28: var(--c-muted-2);
  --token-7a81dff5-d4f9-4d57-bc9d-537432b40b07: var(--c-muted-2);
  --token-557a17d8-02eb-478c-862d-1cf63d4534f9: var(--c-accent);
  --token-400ad84e-48bf-4d52-96ba-86a868160946: var(--c-accent-2);
  --token-cb65d26f-e3c7-4a83-beee-04cd6574c352: var(--c-accent-2);
  --token-44b2d94c-267c-4666-be44-0417e223996a: var(--c-sell);
  --token-52d3488c-0aae-4499-832e-d43f1f65f308: var(--c-buy);
  --token-071978e6-c18c-4d6b-a10f-f76beb6bb7c9: var(--c-border);
  --token-188f8d76-db5f-4506-b5a6-4215547fff04: var(--c-border);
  --token-5ba64881-e1dc-40e2-a3b4-0bba9cddd290: var(--c-border);
  --token-d43407cf-15a8-425a-aaab-4900c1d6edf9: var(--c-border);
  --token-f42c8801-3fd2-4628-91e4-213cd9451d0d: var(--c-border-2);
}

/* ---- poles: ink (#000) & paper (#fff), role depends on page base ---- */
body.base-dark {
  --token-2afe1288-28e6-4836-b95a-46b20ef92b1d: var(--c-bg);
  --token-bd2c0545-5eed-4c7a-8dc0-acf68105de26: var(--c-bg);
  --token-13b4cf21-ce75-4a80-8635-dc4c1b5d9f43: var(--c-bg);
  --token-c5903f09-c6bb-4806-bc0d-c0de938e80ce: var(--c-bg);
  --token-d53f0dbc-1d6b-4af8-9523-e3154bd7bb4c: var(--c-text);
  --token-95adb66c-1712-43fb-bda8-45d87f830fb6: var(--c-text);
  --token-c83340fe-9bbb-48cb-b057-33f5d9aeaf6b: var(--c-text);
  --token-d35cbf99-0086-4c03-a4f7-affb277cbf0a: var(--c-text);
  --token-d8da5724-2d7e-46cf-8e20-de3253a09e3d: var(--c-text);
  --token-308c98f4-0aff-4e66-ad2a-16f37da42d0a: var(--c-text);
}
body.base-light {
  --token-2afe1288-28e6-4836-b95a-46b20ef92b1d: var(--c-text);
  --token-bd2c0545-5eed-4c7a-8dc0-acf68105de26: var(--c-text);
  --token-13b4cf21-ce75-4a80-8635-dc4c1b5d9f43: var(--c-text);
  --token-c5903f09-c6bb-4806-bc0d-c0de938e80ce: var(--c-text);
  --token-d53f0dbc-1d6b-4af8-9523-e3154bd7bb4c: var(--c-bg);
  --token-95adb66c-1712-43fb-bda8-45d87f830fb6: var(--c-bg);
  --token-c83340fe-9bbb-48cb-b057-33f5d9aeaf6b: var(--c-bg);
  --token-d35cbf99-0086-4c03-a4f7-affb277cbf0a: var(--c-bg);
  --token-d8da5724-2d7e-46cf-8e20-de3253a09e3d: var(--c-bg);
  --token-308c98f4-0aff-4e66-ad2a-16f37da42d0a: var(--c-bg);
}

/* smooth mode transitions */
body.base-dark *,
body.base-light * {
  transition: background-color 0.25s ease, border-color 0.25s ease, color 0.2s ease,
    fill 0.2s ease;
}

/* keep the video hero dark in both modes (it's a cinematic dark scene) */
html[data-theme='light'] .lp-hero {
  background: #000;
  color: #fff;
}

/* interim floating theme toggle (moves into the unified nav later) */
.lp-theme-fab {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 9999;
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  border: 1px solid var(--c-border);
  background: var(--c-surface);
  color: var(--c-text);
  cursor: pointer;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.25);
  transition: transform 0.15s ease, background 0.2s ease, border-color 0.2s ease;
}
.lp-theme-fab:hover {
  transform: translateY(-2px);
}
.lp-theme-fab svg {
  width: 20px;
  height: 20px;
  display: block;
}
.lp-theme-fab .lp-ico-moon {
  display: none;
}
.lp-theme-fab[data-mode='light'] .lp-ico-sun {
  display: none;
}
.lp-theme-fab[data-mode='light'] .lp-ico-moon {
  display: inline-flex;
}