/* ==========================================================
   IROZON DESIGN TOKENS — Themes
   Overrides the semantic (semantic.css) and elevation (elevation.css)
   tokens that differ in dark mode. Everything not listed here stays
   at its light value, including the brand primitives, which are
   never themed.

   Carried over as-is from the branding site's existing dark-theme
   implementation — not re-derived or finalized during this cleanup
   pass. Treat these dark values as provisional pending a dedicated
   dark-theme review.

   Two selectors carry identical values on purpose:
     - [data-theme="dark"]        → explicit user choice
     - prefers-color-scheme: dark → OS default, only when the visitor
       has never explicitly chosen a theme (guarded by
       :not([data-theme="light"]))
   ========================================================== */
:root[data-theme="dark"] {
  --color-canvas: #071a21;
  --color-surface: #0e2731;
  --color-surface-elevated: #15323d;
  --color-surface-subtle: #0a2028;

  --color-border: #1e3e49;
  --color-border-strong: #2a4e59;

  --color-text-primary: #f3f6f5;
  --color-text-secondary: #c4cdd1;
  --color-text-muted: #8fa0a6;

  /* Dark surfaces flip Primary to Green — see the rationale comment on
     --color-action-primary in semantic.css. Hover/active were already
     dark-optimized Green tones before Button v2; unchanged. */
  --color-action-primary: var(--irozon-green);
  --color-action-primary-hover: #1fdc9c;
  --color-action-primary-active: #00b378;
  --color-on-action-primary: var(--irozon-ink);

  /* Dark surfaces don't have Green's light-theme contrast problem —
     Lime reads with excellent contrast against the Ink-family canvas,
     so it becomes the link color directly (pure primitive, not a mix)
     rather than reusing the light theme's contrast-adjusted Green. */
  --color-link: var(--irozon-lime);
  --color-link-decoration: var(--irozon-lime);

  --color-warning: #ffc670;
  --color-error: #ff8562;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.35), 0 1px 1px rgba(0, 0, 0, 0.25);
  --shadow-md: 0 6px 16px rgba(0, 0, 0, 0.4), 0 2px 5px rgba(0, 0, 0, 0.3);
  --shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.5), 0 4px 10px rgba(0, 0, 0, 0.35);
  --shadow-card-hover: 0 20px 25px -5px rgb(0 0 0 / 0.5), 0 8px 10px -6px rgb(0 0 0 / 0.35);
}

/* OS default — only applies while the visitor hasn't made an explicit
   choice (an explicit "light" pick must win even if the OS itself is
   set to dark). */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]):not([data-theme="dark"]) {
    --color-canvas: #071a21;
    --color-surface: #0e2731;
    --color-surface-elevated: #15323d;
    --color-surface-subtle: #0a2028;

    --color-border: #1e3e49;
    --color-border-strong: #2a4e59;

    --color-text-primary: #f3f6f5;
    --color-text-secondary: #c4cdd1;
    --color-text-muted: #8fa0a6;

    --color-action-primary: var(--irozon-green);
    --color-action-primary-hover: #1fdc9c;
    --color-action-primary-active: #00b378;
    --color-on-action-primary: var(--irozon-ink);

    --color-link: var(--irozon-lime);
    --color-link-decoration: var(--irozon-lime);

    --color-warning: #ffc670;
    --color-error: #ff8562;

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.35), 0 1px 1px rgba(0, 0, 0, 0.25);
    --shadow-md: 0 6px 16px rgba(0, 0, 0, 0.4), 0 2px 5px rgba(0, 0, 0, 0.3);
    --shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.5), 0 4px 10px rgba(0, 0, 0, 0.35);
    --shadow-card-hover: 0 20px 25px -5px rgb(0 0 0 / 0.5), 0 8px 10px -6px rgb(0 0 0 / 0.35);
  }
}