/*
 * Underswell site — design tokens.
 *
 * Extracted from the NGTheme admin theme (libs/admin-theme/src/styles: palette.css, tokens.css,
 * theme.css, base.css) so the public site shares the operator dashboard's visual language
 * without depending on Tailwind or Angular.
 *
 * Layer 1 — raw OKLCH scales (neutral 264, primary "iris" 277, intents).
 * Layer 2 — semantic tokens: what a color is FOR. Site styles use only these.
 *
 * Color mode is class-based: <html class="dark">, applied before first paint by the inline
 * bootstrap script in index.html and kept in sync by assets/js/app.js.
 */

/* --------------------------------------------------------------- raw scales */
:root {
  --ngt-neutral-50: oklch(0.985 0.002 264);
  --ngt-neutral-100: oklch(0.965 0.003 264);
  --ngt-neutral-200: oklch(0.925 0.005 264);
  --ngt-neutral-300: oklch(0.87 0.008 264);
  --ngt-neutral-400: oklch(0.64 0.013 264);
  --ngt-neutral-500: oklch(0.53 0.014 264);
  --ngt-neutral-600: oklch(0.445 0.014 264);
  --ngt-neutral-700: oklch(0.37 0.013 264);
  --ngt-neutral-800: oklch(0.275 0.01 264);
  --ngt-neutral-900: oklch(0.205 0.007 264);
  --ngt-neutral-925: oklch(0.17 0.005 264);
  --ngt-neutral-950: oklch(0.14 0.004 264);

  --ngt-primary-50: oklch(0.975 0.012 277);
  --ngt-primary-100: oklch(0.935 0.031 277);
  --ngt-primary-200: oklch(0.88 0.059 277);
  --ngt-primary-300: oklch(0.8 0.102 277);
  --ngt-primary-400: oklch(0.705 0.156 277);
  --ngt-primary-500: oklch(0.6 0.22 277);
  --ngt-primary-600: oklch(0.51 0.219 277);
  --ngt-primary-700: oklch(0.445 0.196 277);
  --ngt-primary-800: oklch(0.38 0.166 277);
  --ngt-primary-900: oklch(0.315 0.133 277);
  --ngt-primary-950: oklch(0.25 0.104 277);

  --ngt-success-50: oklch(0.975 0.02 152);
  --ngt-success-200: oklch(0.88 0.068 152);
  --ngt-success-600: oklch(0.51 0.134 152);
  --ngt-success-700: oklch(0.445 0.117 152);
  --ngt-success-800: oklch(0.38 0.1 152);
  --ngt-success-950: oklch(0.25 0.066 152);

  --ngt-warning-50: oklch(0.975 0.02 75);
  --ngt-warning-200: oklch(0.88 0.068 75);
  --ngt-warning-400: oklch(0.78 0.145 75);
  --ngt-warning-800: oklch(0.38 0.08 75);
  --ngt-warning-950: oklch(0.25 0.053 75);

  --ngt-danger-50: oklch(0.975 0.012 25);
  --ngt-danger-200: oklch(0.88 0.063 25);
  --ngt-danger-700: oklch(0.445 0.181 25);
  --ngt-danger-800: oklch(0.38 0.154 25);
  --ngt-danger-950: oklch(0.25 0.099 25);

  --ngt-info-50: oklch(0.975 0.013 238);
  --ngt-info-200: oklch(0.88 0.06 238);
  --ngt-info-700: oklch(0.445 0.099 238);
  --ngt-info-800: oklch(0.38 0.084 238);
  --ngt-info-950: oklch(0.25 0.056 238);
}

/* -------------------------------------------------------------------- light */
:root {
  color-scheme: light;

  --ngt-background: var(--ngt-neutral-50);
  --ngt-surface: oklch(1 0 0);
  --ngt-surface-muted: var(--ngt-neutral-100);
  --ngt-surface-raised: oklch(1 0 0);
  --ngt-surface-inverted: var(--ngt-neutral-900);

  --ngt-border: var(--ngt-neutral-200);
  --ngt-border-strong: var(--ngt-neutral-300);

  --ngt-text-primary: var(--ngt-neutral-950);
  --ngt-text-secondary: var(--ngt-neutral-600);
  --ngt-text-muted: var(--ngt-neutral-500);
  --ngt-text-inverted: var(--ngt-neutral-50);
  --ngt-text-link: var(--ngt-primary-600);

  --ngt-primary: var(--ngt-primary-600);
  --ngt-primary-hover: var(--ngt-primary-700);
  --ngt-primary-active: var(--ngt-primary-800);
  --ngt-primary-fg: oklch(1 0 0);
  --ngt-primary-subtle: var(--ngt-primary-50);
  --ngt-primary-subtle-fg: var(--ngt-primary-700);
  --ngt-primary-border: var(--ngt-primary-200);

  --ngt-secondary: var(--ngt-neutral-100);
  --ngt-secondary-hover: var(--ngt-neutral-200);
  --ngt-secondary-fg: var(--ngt-neutral-900);

  --ngt-success-subtle: var(--ngt-success-50);
  --ngt-success-subtle-fg: var(--ngt-success-700);
  --ngt-success-border: var(--ngt-success-200);
  --ngt-warning-subtle: var(--ngt-warning-50);
  --ngt-warning-subtle-fg: var(--ngt-warning-800);
  --ngt-warning-border: var(--ngt-warning-200);
  --ngt-danger-subtle: var(--ngt-danger-50);
  --ngt-danger-subtle-fg: var(--ngt-danger-700);
  --ngt-danger-border: var(--ngt-danger-200);
  --ngt-info-subtle: var(--ngt-info-50);
  --ngt-info-subtle-fg: var(--ngt-info-700);
  --ngt-info-border: var(--ngt-info-200);

  --ngt-ring: var(--ngt-primary-500);
  --ngt-hover-overlay: oklch(0.14 0.005 264 / 0.04);
  --ngt-selection: var(--ngt-primary-100);

  --ngt-shadow-sm: 0 1px 2px 0 oklch(0.14 0.01 264 / 0.06);
  --ngt-shadow-md:
    0 4px 12px -2px oklch(0.14 0.01 264 / 0.08), 0 2px 4px -2px oklch(0.14 0.01 264 / 0.05);
  --ngt-shadow-lg:
    0 12px 32px -8px oklch(0.14 0.01 264 / 0.12), 0 4px 8px -4px oklch(0.14 0.01 264 / 0.06);
  --ngt-shadow-overlay:
    0 24px 48px -12px oklch(0.14 0.01 264 / 0.22), 0 0 0 1px oklch(0.14 0.01 264 / 0.06);

  /* Site-only: hero glow and wave strokes, derived from the primary scale. */
  --usw-glow: oklch(0.6 0.22 277 / 0.16);
  --usw-wave: var(--ngt-primary-500);
  --usw-header-bg: oklch(0.985 0.002 264 / 0.78);

  /* Categorical chart series (NGTheme chart-1..4, validated for CVD separation on the light surface). */
  --usw-chart-1: #4f49df;
  --usw-chart-2: #009c9c;
  --usw-chart-3: #dc8900;
  --usw-chart-4: #de3b3d;
}

/* --------------------------------------------------------------------- dark */
:root.dark {
  color-scheme: dark;

  --ngt-background: var(--ngt-neutral-950);
  --ngt-surface: var(--ngt-neutral-925);
  --ngt-surface-muted: var(--ngt-neutral-900);
  --ngt-surface-raised: var(--ngt-neutral-900);
  --ngt-surface-inverted: var(--ngt-neutral-50);

  --ngt-border: var(--ngt-neutral-800);
  --ngt-border-strong: var(--ngt-neutral-700);

  --ngt-text-primary: var(--ngt-neutral-50);
  --ngt-text-secondary: var(--ngt-neutral-300);
  --ngt-text-muted: var(--ngt-neutral-400);
  --ngt-text-inverted: var(--ngt-neutral-950);
  --ngt-text-link: var(--ngt-primary-300);

  --ngt-primary-subtle: var(--ngt-primary-950);
  --ngt-primary-subtle-fg: var(--ngt-primary-200);
  --ngt-primary-border: var(--ngt-primary-800);

  --ngt-secondary: var(--ngt-neutral-800);
  --ngt-secondary-hover: var(--ngt-neutral-700);
  --ngt-secondary-fg: var(--ngt-neutral-50);

  --ngt-success-subtle: var(--ngt-success-950);
  --ngt-success-subtle-fg: var(--ngt-success-200);
  --ngt-success-border: var(--ngt-success-800);
  --ngt-warning-subtle: var(--ngt-warning-950);
  --ngt-warning-subtle-fg: var(--ngt-warning-200);
  --ngt-warning-border: var(--ngt-warning-800);
  --ngt-danger-subtle: var(--ngt-danger-950);
  --ngt-danger-subtle-fg: var(--ngt-danger-200);
  --ngt-danger-border: var(--ngt-danger-800);
  --ngt-info-subtle: var(--ngt-info-950);
  --ngt-info-subtle-fg: var(--ngt-info-200);
  --ngt-info-border: var(--ngt-info-800);

  --ngt-ring: var(--ngt-primary-400);
  --ngt-hover-overlay: oklch(1 0 0 / 0.05);
  --ngt-selection: var(--ngt-primary-800);

  --ngt-shadow-sm: 0 1px 2px 0 oklch(0 0 0 / 0.4);
  --ngt-shadow-md: 0 4px 12px -2px oklch(0 0 0 / 0.5), 0 2px 4px -2px oklch(0 0 0 / 0.4);
  --ngt-shadow-lg: 0 12px 32px -8px oklch(0 0 0 / 0.6), 0 4px 8px -4px oklch(0 0 0 / 0.45);
  --ngt-shadow-overlay: 0 24px 48px -12px oklch(0 0 0 / 0.7), 0 0 0 1px oklch(1 0 0 / 0.08);

  --usw-glow: oklch(0.6 0.22 277 / 0.22);
  --usw-wave: var(--ngt-primary-400);
  --usw-header-bg: oklch(0.14 0.004 264 / 0.72);

  /* Dark steps of the same hues, validated against the dark surface (not an automatic flip). */
  --usw-chart-1: #7a84f8;
  --usw-chart-2: #00a8a8;
  --usw-chart-3: #c38700;
  --usw-chart-4: #d33a3c;
}

/* ------------------------------------------------ typography, shape, motion */
:root {
  --ngt-font-sans:
    'Inter Variable', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif,
    'Apple Color Emoji', 'Segoe UI Emoji';
  --ngt-font-mono:
    'JetBrains Mono Variable', ui-monospace, SFMono-Regular, Menlo, Consolas, 'Liberation Mono',
    monospace;

  --ngt-radius-sm: 0.25rem;
  --ngt-radius-md: 0.5rem;
  --ngt-radius-lg: 0.75rem;
  --ngt-radius-xl: 1rem;
  --ngt-radius-full: 9999px;

  --ngt-tracking-tight: -0.015em;

  --ngt-duration-fast: 120ms;
  --ngt-duration-normal: 200ms;
  --ngt-duration-slow: 320ms;
  --ngt-ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --ngt-ease-emphasized: cubic-bezier(0.3, 0, 0, 1.2);

  --ngt-z-sticky: 100;
  --ngt-z-overlay: 1100;

  --ngt-topbar-height: 4rem;
  --ngt-content-max-width: 72rem;
}

/* Self-hosted variable fonts (SIL Open Font License), from @fontsource-variable. */
@font-face {
  font-family: 'Inter Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url('../fonts/inter-latin-wght-normal.woff2') format('woff2-variations');
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'JetBrains Mono Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 800;
  src: url('../fonts/jetbrains-mono-latin-wght-normal.woff2') format('woff2-variations');
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}