/**
 * Nicon design tokens — light / dark / auto
 */
:root,
[data-theme="light"] {
  color-scheme: light;

  --nicon-steel: #57636c;
  --nicon-steel-dark: #3d464c;
  --nicon-orange: #d05018;
  --nicon-orange-hover: #b84414;
  --nicon-cyan: #39d2c0;
  --nicon-green: #04a24c;

  --color-primary: var(--nicon-steel-dark);
  --color-accent: var(--nicon-orange);
  --color-text: #101213;
  --color-text-muted: #57636c;
  --color-heading: #101213;
  --color-bg: #f1f4f8;
  --color-bg-alt: #ffffff;
  --color-surface: #ffffff;
  --color-surface-glass: rgb(255 255 255 / 72%);
  --color-border: #e0e3e7;
  --color-header-bg: rgb(241 244 248 / 88%);
  --color-footer-bg: #2a3035;
  --color-footer-text: #e8eaed;
  --color-hero-mesh-1: #d05018;
  --color-hero-mesh-2: #39d2c0;
  --color-hero-mesh-3: #57636c;
  --color-card-shadow: 0 12px 40px rgb(16 18 19 / 8%);
  --color-link-hover: var(--nicon-orange);

  --font-sans: "Figtree", system-ui, sans-serif;
  --font-display: "DM Sans", var(--font-sans);
  --font-size-base: 1.0625rem;
  --line-height: 1.55;
  --container-max: 72rem;
  --page-gutter: clamp(1rem, 3vw, 2rem);
  --header-height: 4.5rem;
  --radius-sm: 2px;
  --radius-md: 3px;
  --radius-lg: 4px;
  --z-header: 100;
  --z-overlay: 200;
  --space-xs: 0.5rem;
  --space-sm: 1rem;
  --space-md: 1.5rem;
  --space-lg: 2.5rem;
  --space-xl: 4rem;
}

[data-theme="dark"] {
  color-scheme: dark;

  --color-primary: #f1f4f8;
  --color-accent: #e86a3a;
  --color-text: #e8eaed;
  --color-text-muted: #a8b0b6;
  --color-heading: #ffffff;
  --color-bg: #101213;
  --color-bg-alt: #1a1d21;
  --color-surface: #1f2328;
  --color-surface-glass: rgb(31 35 40 / 78%);
  --color-border: #2f363d;
  --color-header-bg: rgb(16 18 19 / 90%);
  --color-footer-bg: #0a0c0d;
  --color-footer-text: #c8cdd2;
  --color-hero-mesh-1: #8a3a18;
  --color-hero-mesh-2: #1f7a70;
  --color-hero-mesh-3: #3d464c;
  --color-card-shadow: 0 16px 48px rgb(0 0 0 / 35%);
  --color-link-hover: #e86a3a;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --color-primary: #f1f4f8;
    --color-accent: #e86a3a;
    --color-text: #e8eaed;
    --color-text-muted: #a8b0b6;
    --color-heading: #ffffff;
    --color-bg: #101213;
    --color-bg-alt: #1a1d21;
    --color-surface: #1f2328;
    --color-surface-glass: rgb(31 35 40 / 78%);
    --color-border: #2f363d;
    --color-header-bg: rgb(16 18 19 / 90%);
    --color-footer-bg: #0a0c0d;
    --color-footer-text: #c8cdd2;
    --color-hero-mesh-1: #8a3a18;
    --color-hero-mesh-2: #1f7a70;
    --color-hero-mesh-3: #3d464c;
    --color-card-shadow: 0 16px 48px rgb(0 0 0 / 35%);
    --color-link-hover: #e86a3a;
  }
}