/* Nemo design tokens v1.0
   Source of truth for the style guide, docs and the topside / HUD UI.
   Light is the default. Dark applies via the OS setting, or data-theme="dark" on :root or any element (e.g. the HUD). */

:root {
  /* Brand (from the logo) */
  --abyss: #042C53;
  --lens: #185FA5;
  --lens-light: #85B7EB;
  --foam: #F1EFE8;

  /* Type */
  --font-sans: "Inter Variable", "Inter", -apple-system, "SF Pro Text", "Segoe UI", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --font-logo: "Manrope", sans-serif; /* logo only, never for UI text */
  --w-regular: 400;
  --w-medium: 510;
  --w-semibold: 590;

  /* Type scale: size / line height / tracking */
  --t-display: 48px;  --lh-display: 1.1;   --ls-display: -0.022em;
  --t-title1: 38px;   --lh-title1: 1.1;    --ls-title1: -0.022em;
  --t-title2: 24px;   --lh-title2: 1.33;   --ls-title2: -0.012em;
  --t-title3: 20px;   --lh-title3: 1.33;   --ls-title3: -0.012em;
  --t-body-lg: 17px;  --lh-body-lg: 1.6;   --ls-body-lg: -0.011em;
  --t-body: 15px;     --lh-body: 1.6;      --ls-body: -0.011em;
  --t-small: 14px;    --lh-small: 1.5;     --ls-small: -0.013em;
  --t-ui: 13px;       --lh-ui: 1.5;        --ls-ui: -0.01em;
  --t-caption: 12px;  --lh-caption: 1.4;   --ls-caption: 0;
  --t-micro: 11px;    --lh-micro: 1.4;     --ls-micro: 0;

  /* Spacing: 4 px base */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px; --s-5: 24px;
  --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px;
  --s-half: 2px;

  /* Radius */
  --r-xs: 4px;   /* chips, checkboxes, kbd */
  --r-sm: 6px;   /* buttons, inputs */
  --r-md: 8px;   /* cards */
  --r-lg: 12px;  /* panels, dialogs */
  --r-full: 999px;

  /* Control heights */
  --h-compact: 24px;
  --h-control: 28px;
  --h-large: 32px;

  /* Motion */
  --dur-fast: 120ms;
  --dur-base: 180ms;
  --ease: cubic-bezier(0.2, 0, 0, 1);

  /* Light theme (default) */
  --bg: #FFFFFF;
  --surface-1: #F7F6F2;
  --surface-2: #EFEDE7;
  --border: #E4E2DB;
  --border-strong: #CFCCC3;
  --text-1: #0B1724;
  --text-2: #556070;
  --text-3: #7E8794;
  --accent: var(--lens);
  --accent-hover: #134E88;
  --on-accent: #FFFFFF;
  --accent-soft: #E6F0FA;
  --ok: #1E7F55;     --ok-soft: #E3F4EB;
  --warn: #9A6400;   --warn-soft: #FBF0D9;
  --danger: #C23434; --danger-soft: #FBE6E6;
  --focus: 0 0 0 2px var(--bg), 0 0 0 4px var(--lens-light);
  --shadow-pop: 0 8px 24px rgba(4, 44, 83, 0.12), 0 2px 6px rgba(4, 44, 83, 0.08);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #050D16;
    --surface-1: #0B1826;
    --surface-2: #112235;
    --border: #1B2D41;
    --border-strong: #2A4058;
    --text-1: #F1EFE8;
    --text-2: #A3AEBB;
    --text-3: #6E7B8C;
    --accent: var(--lens-light);
    --accent-hover: #A5CBF1;
    --on-accent: var(--abyss);
    --accent-soft: #0E2A47;
    --ok: #4CC38A;     --ok-soft: #0D2A1F;
    --warn: #F2B33D;   --warn-soft: #2D2210;
    --danger: #F26D6D; --danger-soft: #331517;
    --focus: 0 0 0 2px var(--bg), 0 0 0 4px var(--lens-light);
    --shadow-pop: 0 8px 24px rgba(0, 0, 0, 0.5), 0 2px 6px rgba(0, 0, 0, 0.4);
  }
}

[data-theme="dark"] {
  --bg: #050D16;
  --surface-1: #0B1826;
  --surface-2: #112235;
  --border: #1B2D41;
  --border-strong: #2A4058;
  --text-1: #F1EFE8;
  --text-2: #A3AEBB;
  --text-3: #6E7B8C;
  --accent: var(--lens-light);
  --accent-hover: #A5CBF1;
  --on-accent: var(--abyss);
  --accent-soft: #0E2A47;
  --ok: #4CC38A;     --ok-soft: #0D2A1F;
  --warn: #F2B33D;   --warn-soft: #2D2210;
  --danger: #F26D6D; --danger-soft: #331517;
  --focus: 0 0 0 2px var(--bg), 0 0 0 4px var(--lens-light);
  --shadow-pop: 0 8px 24px rgba(0, 0, 0, 0.5), 0 2px 6px rgba(0, 0, 0, 0.4);
}