/* mapindex colour tokens. Components use only --color-* roles.
   Change a primitive to restyle every role that references it. */

:root {
  /* Primitives */
  --slate-50: #f5f6fa;
  --slate-100: #eef0f6;
  --slate-200: #e3e6f0;
  --slate-300: #c9cedc;
  --slate-400: #a9b0c6;
  --slate-450: #8f97ae;
  --slate-500: #737b92;
  --slate-550: #5c647c;
  --slate-600: #535b73;
  --slate-700: #3a4259;
  --slate-800: #2e3549;
  --slate-850: #242a3b;
  --slate-900: #181d2a;
  --slate-950: #0d1018;
  --green-100: #e1f4e8;
  --green-300: #a6ecc2;
  --green-400: #7fdca4;
  --green-600: #1d7a46;
  --green-800: #13532f;
  --green-900: #173528;
  --amber-100: #fbefd2;
  --amber-300: #f7d995;
  --amber-400: #f2c46b;
  --amber-600: #8a5a00;
  --amber-800: #5e3d00;
  --amber-900: #3a2e14;
  --red-100: #fde4e4;
  --red-300: #ffb3b3;
  --red-400: #ff8f8f;
  --red-600: #c0353a;
  --red-800: #8c1d22;
  --red-900: #3d1c22;
  --blue-100: #e2eefc;
  --blue-300: #b5d8ff;
  --blue-400: #8cc4ff;
  --blue-600: #1f63b8;
  --blue-800: #154683;
  --blue-900: #17304a;
  --white: #ffffff;
  /* Contour: crisp cool paper, ink, a lively cobalt accent and coral as the second
     voice; a deep navy night for the dark theme. The slate ramp above stays for the
     thumbnails' base map (export_map_style.py). */
  --paper-0: #ffffff;
  --paper-50: #f7f9fc;
  --paper-100: #f3f5f8;
  --paper-200: #e7ebf1;
  --paper-300: #dbe1ea;
  --paper-400: #c3cbd7;
  --ink-500: #4a5d7a;
  --ink-600: #566173;
  --ink-700: #434d5c;
  --ink-900: #121a26;
  --cobalt-50: #e1e8fd;
  --cobalt-200: #c9d5ff;
  --cobalt-300: #a9bdff;
  --cobalt-400: #86a2ff;
  --cobalt-600: #2447d6;
  --cobalt-700: #1a37ad;
  --cobalt-800: #1a3192;
  --cobalt-900: #0b1640;
  --cobalt-950: #1e2a52;
  --coral-100: #fde7dc;
  --coral-200: #ffc2aa;
  --coral-300: #ff9f7a;
  --coral-600: #b0390a;
  --coral-700: #9a3412;
  --coral-900: #3f2620;
  --night-50: #e8edf4;
  --night-200: #b3bccb;
  --night-300: #a0abbc;
  --night-600: #2d3a4e;
  --night-700: #253041;
  --night-800: #1e2837;
  --night-850: #18202d;
  --night-900: #131a25;
  --night-950: #0d121b;
  --night-990: #020408;
  --shade-900: #1c2a44;

  /* Roles: light is the reference theme */
  --color-canvas: var(--paper-100);
  --color-surface: var(--paper-200);
  --color-card: var(--paper-0);
  --color-raised: var(--paper-50);
  --color-field: var(--paper-0);
  --color-hover: var(--paper-300);
  --color-scrollbar: var(--paper-400);
  --color-text: var(--ink-900);
  --color-text-muted: var(--ink-700);
  --color-text-subtle: var(--ink-600);
  --color-accent: var(--cobalt-600);
  --color-accent-hover: var(--cobalt-700);
  --color-on-accent: var(--white);
  --color-accent-soft: var(--cobalt-50);
  --color-accent-soft-ink: var(--cobalt-800);
  --color-focus: var(--cobalt-600);
  /* The second voice: eyebrows, highlights, small markers. Never actions. */
  --color-earth: var(--coral-600);
  --color-earth-soft: var(--coral-100);
  --color-earth-ink: var(--coral-700);
  --color-success: var(--green-600);
  --color-success-bg: var(--green-100);
  --color-success-ink: var(--green-800);
  --color-warning: var(--amber-600);
  --color-warning-bg: var(--amber-100);
  --color-warning-ink: var(--amber-800);
  --color-danger: var(--red-600);
  --color-danger-bg: var(--red-100);
  --color-danger-ink: var(--red-800);
  --color-info: var(--blue-600);
  --color-info-bg: var(--blue-100);
  --color-info-ink: var(--blue-800);
  /* Shadows and scrims: cool and soft in light, deep navy in dark. */
  --color-shadow: var(--shade-900);
  /* The logo follows the accent: cobalt by day, a lighter cobalt at night. */
  --color-logo: var(--cobalt-600);
  /* Contour line work: minor lines in blue-grey ink, index lines in cobalt; applied
     at low opacity. By day a white highlight crisps them, at night they glow. */
  --color-contour: var(--ink-500);
  --color-contour-index: var(--cobalt-600);
  --color-contour-glow: var(--white);
  /* The light that pools around each summit. */
  --color-summit: color-mix(in srgb, var(--white) 55%, transparent);
  --color-summit-halo: color-mix(in srgb, var(--cobalt-300) 14%, transparent);
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --color-canvas: var(--night-950);
    --color-surface: var(--night-900);
    --color-card: var(--night-850);
    --color-raised: var(--night-800);
    --color-field: var(--night-700);
    --color-hover: var(--night-600);
    --color-scrollbar: var(--night-600);
    --color-text: var(--night-50);
    --color-text-muted: var(--night-200);
    --color-text-subtle: var(--night-300);
    --color-accent: var(--cobalt-400);
    --color-accent-hover: var(--cobalt-300);
    --color-on-accent: var(--cobalt-900);
    --color-accent-soft: var(--cobalt-950);
    --color-accent-soft-ink: var(--cobalt-200);
    --color-focus: var(--cobalt-300);
    --color-earth: var(--coral-300);
    --color-earth-soft: var(--coral-900);
    --color-earth-ink: var(--coral-200);
    --color-success: var(--green-400);
    --color-success-bg: var(--green-900);
    --color-success-ink: var(--green-300);
    --color-warning: var(--amber-400);
    --color-warning-bg: var(--amber-900);
    --color-warning-ink: var(--amber-300);
    --color-danger: var(--red-400);
    --color-danger-bg: var(--red-900);
    --color-danger-ink: var(--red-300);
    --color-info: var(--blue-400);
    --color-info-bg: var(--blue-900);
    --color-info-ink: var(--blue-300);
    --color-shadow: var(--night-990);
    --color-logo: var(--cobalt-400);
    --color-contour: var(--night-50);
    --color-contour-index: var(--cobalt-400);
    --color-contour-glow: var(--cobalt-400);
    --color-summit: color-mix(in srgb, var(--cobalt-400) 10%, transparent);
    --color-summit-halo: color-mix(in srgb, var(--cobalt-400) 4%, transparent);
    color-scheme: dark;
  }
}

:root[data-theme="dark"] {
  --color-canvas: var(--night-950);
  --color-surface: var(--night-900);
  --color-card: var(--night-850);
  --color-raised: var(--night-800);
  --color-field: var(--night-700);
  --color-hover: var(--night-600);
  --color-scrollbar: var(--night-600);
  --color-text: var(--night-50);
  --color-text-muted: var(--night-200);
  --color-text-subtle: var(--night-300);
  --color-accent: var(--cobalt-400);
  --color-accent-hover: var(--cobalt-300);
  --color-on-accent: var(--cobalt-900);
  --color-accent-soft: var(--cobalt-950);
  --color-accent-soft-ink: var(--cobalt-200);
  --color-focus: var(--cobalt-300);
  --color-earth: var(--coral-300);
  --color-earth-soft: var(--coral-900);
  --color-earth-ink: var(--coral-200);
  --color-success: var(--green-400);
  --color-success-bg: var(--green-900);
  --color-success-ink: var(--green-300);
  --color-warning: var(--amber-400);
  --color-warning-bg: var(--amber-900);
  --color-warning-ink: var(--amber-300);
  --color-danger: var(--red-400);
  --color-danger-bg: var(--red-900);
  --color-danger-ink: var(--red-300);
  --color-info: var(--blue-400);
  --color-info-bg: var(--blue-900);
  --color-info-ink: var(--blue-300);
  --color-shadow: var(--night-990);
  --color-logo: var(--cobalt-400);
  --color-contour: var(--night-50);
  --color-contour-index: var(--cobalt-400);
  --color-contour-glow: var(--cobalt-400);
  --color-summit: color-mix(in srgb, var(--cobalt-400) 10%, transparent);
  --color-summit-halo: color-mix(in srgb, var(--cobalt-400) 4%, transparent);
  color-scheme: dark;
}