/* Aiory design tokens: the only file with raw colour values.

   Two tiers:
   - primitives (--neutral-*, --gray-*, --violet-*, ...): fixed ramps, never used by components;
   - semantic tokens (--color-*, --shadow-*): the only colours components may use. Themes change
     semantic values only.

   Themes: html[data-theme="dark" | "light" | "mono-light" | "mono-dark"], dark is the default.
   The legacy classes (html.theme-light, html.theme-mono [+ .theme-light], html.theme-dark) are
   aliases until the old pages are gone. Theme selectors are wrapped so that data-theme always
   wins over an alias class and the default carries no specificity.

   Values come from meta/analysis/css-system.md §10.1 and the C1 house style (popups.css):
   card #0b1220, border #1e293b, divider #151d30, radius 18, 50 px rows, accent #814cef, Manrope.
   Text tokens reach WCAG AA (4.5:1) on every background token in every theme; this is checked by
   web/tests/js/tokens-contrast.test.cjs. --color-text-disabled is exempt (inactive controls).

   Breakpoints (mobile first, min-width; custom properties cannot be used inside media queries,
   so the values are repeated literally there and exposed here for JS via getComputedStyle):
     xs 480 · sm 640 (dialog → bottom sheet below) · md 760 (apps as centred card) · lg 1024 · xl 1200
     (the app shell columns use their own widths in shell.css: 1280 quick access, 1680 rail) */

@layer reset, tokens, base, layout, components, apps, utilities;

@layer tokens {
  /* ── Primitives ─────────────────────────────────────────────────────────── */
  :where(:root) {
    /* Slate, plus the C1 dark surfaces between 800 and 1000. */
    --neutral-0: #ffffff;
    --neutral-50: #f8fafc;
    --neutral-100: #f1f5f9;
    --neutral-200: #e2e8f0;
    --neutral-300: #cbd5e1;
    --neutral-400: #94a3b8;
    --neutral-450: #7c8aa1;
    --neutral-500: #64748b;
    --neutral-550: #56657b;
    --neutral-600: #475569;
    --neutral-700: #334155;
    --neutral-800: #1e293b;
    --neutral-850: #151d30;
    --neutral-900: #0f172a;
    --neutral-910: #0e1428;
    --neutral-925: #0b1220;
    --neutral-950: #070c1a;
    --neutral-975: #030617;

    /* True greys for the mono themes. */
    --gray-0: #ffffff;
    --gray-50: #fafafa;
    --gray-100: #f5f5f5;
    --gray-200: #e5e5e5;
    --gray-300: #d4d4d4;
    --gray-400: #a3a3a3;
    --gray-450: #8a8a8a;
    --gray-500: #737373;
    --gray-550: #666666;
    --gray-600: #525252;
    --gray-700: #404040;
    --gray-750: #383838;
    --gray-800: #262626;
    --gray-850: #1f1f1f;
    --gray-900: #171717;
    --gray-925: #111111;
    --gray-950: #0a0a0a;

    /* Solid app colours (launcher icons, .ui-icon-tile--solid): the symbol colour on the subtle tile, or the
       light -> deep gradient behind a white glyph on the colourful one (Apps settings).
       One distinct hue per app (ui/icons.js appIcon). */
    --app-violet: #8b5cf6;
    --app-violet-deep: #6d28d9;
    --app-purple: #a855f7;
    --app-purple-deep: #7e22ce;
    --app-indigo: #6366f1;
    --app-indigo-deep: #4338ca;
    --app-blue: #3b82f6;
    --app-blue-deep: #1d4ed8;
    --app-sky: #0ea5e9;
    --app-sky-deep: #0369a1;
    --app-cyan: #06b6d4;
    --app-cyan-deep: #0e7490;
    --app-teal: #14b8a6;
    --app-teal-deep: #0f766e;
    --app-green: #10b981;
    --app-green-deep: #047857;
    --app-leaf: #22c55e;
    --app-leaf-deep: #15803d;
    --app-amber: #f59e0b;
    --app-amber-deep: #b45309;
    --app-orange: #f97316;
    --app-orange-deep: #c2410c;
    --app-red: #ef4444;
    --app-red-deep: #b91c1c;
    --app-rose: #f43f5e;
    --app-rose-deep: #be123c;
    --app-pink: #ec4899;
    --app-pink-deep: #be185d;
    --app-fuchsia: #d946ef;
    --app-fuchsia-deep: #a21caf;
    --app-slate: #64748b;
    --app-slate-deep: #334155;

    --violet-100: #ede9fe;
    --violet-200: #ddd6fe;
    --violet-300: #c4b5fd;
    --violet-400: #a78bfa;
    --violet-600: #7c3aed;
    --violet-700: #6d28d9;
    --violet-800: #5b21b6;
    --brand-500: #814cef;
    --brand-600: #7040d8;
    --brand-700: #6236c2;

    --red-300: #fca5a5;
    --red-400: #f87171;
    --red-600: #dc2626;
    --red-700: #b91c1c;
    --red-800: #991b1b;
    --emerald-300: #6ee7b7;
    --emerald-400: #34d399;
    --emerald-700: #047857;
    --emerald-800: #065f46;
    --amber-200: #fde68a;
    --amber-400: #fbbf24;
    --amber-700: #b45309;
    --amber-800: #92400e;
    --sky-300: #7dd3fc;
    --sky-400: #38bdf8;
    --sky-700: #0369a1;
    --sky-800: #075985;
    --blue-300: #93c5fd;
    --blue-700: #1d4ed8;
    --teal-300: #5eead4;
    --teal-700: #0f766e;
    --orange-300: #fdba74;
    --orange-700: #c2410c;
    --rose-300: #fda4af;
    --rose-700: #be123c;
  }

  /* ── Map marks (Maps app) ───────────────────────────────────────────────────
     Theme-independent: the map is the light cartography in every theme (dark themes dim it). The
     single source for apps/maps.css, apps/maps/palette.js (MapLibre paint needs literal colours) and
     the map build scripts (web/tools/build/map-colors.cjs reads this block). Every POI group colour
     keeps at least 3:1 against the white glyph; labels are the darker shade of their group. */
  :where(:root) {
    --map-poi-food: #e8710a;
    --map-poi-food-label: #b45908;
    --map-poi-shopping: #1a73e8;
    --map-poi-shopping-label: #155cb8;
    --map-poi-transit: #1a56a8;
    --map-poi-transit-label: #15467f;
    --map-poi-health: #d93025;
    --map-poi-health-label: #a8261d;
    --map-poi-nature: #188038;
    --map-poi-nature-label: #0f6b2e;
    --map-poi-culture: #0f8a8a;
    --map-poi-culture-label: #0b6666;
    --map-poi-lodging: #c2185b;
    --map-poi-lodging-label: #8f0f43;
    --map-poi-services: #5f6368;
    --map-poi-services-label: #44474b;

    /* Own marks and interaction: rim and glyph are always white, never themed. */
    --map-mark-ring: #ffffff;
    --map-mark-ink: #1f2937;
    --map-mark-shadow: 0 1px 2px rgb(15 23 42 / 0.35), 0 2px 6px rgb(15 23 42 / 0.18);
    /* The same shadows as filters, for the pin's SVG outline (resting and lifted). */
    --map-mark-drop: drop-shadow(0 1px 1px rgb(15 23 42 / 0.35)) drop-shadow(0 2px 3px rgb(15 23 42 / 0.18));
    --map-mark-lift-drop: drop-shadow(0 2px 2px rgb(15 23 42 / 0.35)) drop-shadow(0 6px 7px rgb(15 23 42 / 0.25));
    --map-mark-ground: rgb(15 23 42 / 0.3);
    --map-hover: #7c4dff;
    /* Violet, not blue: the own position must stand out on the blue route line it travels on. */
    --map-location: #7040d8;
    --map-location-halo: rgb(112 64 216 / 0.24);
    --map-route: #2563eb;
    --map-route-casing: #1e40af;
    --map-route-alt: #94a3b8;
    --map-route-alt-casing: #64748b;
    --map-destination: #dc2626;
    --map-measure: #1f2937;
    --map-track: #047857;
    --map-traffic-jam: #d32f2f;
    --map-traffic-slow: #f4511e;
    --map-traffic-accident: #b71c1c;
    --map-traffic-hazard: #f9a825;
    --map-traffic-closure: #8e24aa;
    --map-traffic-roadworks: #ef6c00;
    --map-aerial-label-halo: rgb(2 6 23 / 0.85);

    /* Cartography details drawn by the style build (paths, shields, town names, trees, outlines). */
    --map-path-track: #a58a63;
    --map-path-cycleway: #3f7d55;
    --map-shield-motorway: #0b3f8f;
    --map-shield-motorway-ink: #ffffff;
    --map-shield-federal: #f2c200;
    --map-shield-federal-ink: #1a1a1a;
    --map-label-town: #3a3d42;
    --map-label-field: #9aa0a6;
    --map-label-halo: #ffffff;
    --map-tree: #4e8c58;
    --map-building-edge: #b3aca4;
  }

  /* ── Scales shared by every theme ───────────────────────────────────────── */
  :where(:root) {
    --font-sans: Manrope, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --font-display: "Space Grotesk", Manrope, ui-sans-serif, system-ui, sans-serif;
    --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

    /* Type scale (px: 11 12 13 14 15 16 18 20 24 30 36); 11 px is the floor. */
    --font-size-2xs: 0.6875rem;
    --font-size-xs: 0.75rem;
    --font-size-sm: 0.8125rem;
    --font-size-md: 0.875rem;
    --font-size-base: 0.9375rem;
    --font-size-lg: 1rem;
    --font-size-xl: 1.125rem;
    --font-size-2xl: 1.25rem;
    --font-size-3xl: 1.5rem;
    --font-size-4xl: 1.875rem;
    --font-size-5xl: 2.25rem;

    --font-weight-regular: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --font-weight-extrabold: 800;

    --line-height-none: 1;
    --line-height-tight: 1.2;
    --line-height-snug: 1.35;
    --line-height-normal: 1.5;
    --line-height-relaxed: 1.6;

    --letter-spacing-tight: -0.02em;
    --letter-spacing-normal: 0;
    --letter-spacing-wide: 0.04em;
    --letter-spacing-caps: 0.06em;

    /* Spacing: 4 px base with 2 px half steps (names follow Tailwind). */
    --space-0: 0;
    --space-0-5: 2px;
    --space-1: 4px;
    --space-1-5: 6px;
    --space-2: 8px;
    --space-2-5: 10px;
    --space-3: 12px;
    --space-3-5: 14px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-8: 32px;
    --space-10: 40px;
    --space-12: 48px;
    --space-16: 64px;

    --radius-xs: 4px;
    --radius-sm: 6px;
    --radius-md: 8px;
    --radius-lg: 10px;
    --radius-xl: 12px;
    --radius-2xl: 14px;
    --radius-3xl: 18px;
    --radius-sheet: 20px;
    --radius-pill: 999px;
    --radius-round: 50%;

    --border-width: 1px;
    --focus-ring-width: 2px;
    --focus-ring-offset: 2px;

    /* Stacking: no value may exceed --z-system. */
    --z-base: 0;
    --z-raised: 1;
    --z-sticky: 10;
    --z-header: 50;
    --z-drawer: 100;
    --z-popover: 200;
    --z-app: 300;
    --z-dialog: 400;
    --z-toast: 500;
    --z-system: 600;

    --duration-fast: 120ms;
    --duration-base: 160ms;
    --duration-slow: 250ms;
    --duration-slower: 400ms;
    --duration-spin: 800ms;
    --duration-shimmer: 1400ms;
    --ease-standard: ease;
    --ease-out: cubic-bezier(0.2, 0, 0, 1);
    --ease-emphasized: cubic-bezier(0.16, 1, 0.3, 1);

    /* Controls: md is the default and meets the 44 px touch target. */
    --control-h-sm: 36px;
    --control-h-md: 44px;
    --control-h-lg: 50px;
    --touch-target: 44px;
    --row-h: 50px;
    --icon-size-sm: 16px;
    --icon-size-md: 20px;
    --icon-size-lg: 24px;
    --icon-button-size: 36px;
    --header-h: 56px;

    --content-dialog-sm: 400px;
    --content-dialog: 440px;
    --content-dialog-md: 520px;
    --content-dialog-lg: 640px;
    --content-dialog-xl: 960px;
    --content-reading: 760px;
    --content-max: 1200px;
    --rail-width: 344px;
    --panel-width: 420px;

    --breakpoint-xs: 480px;
    --breakpoint-sm: 640px;
    --breakpoint-md: 760px;
    --breakpoint-lg: 1024px;
    --breakpoint-xl: 1200px;

    --safe-top: env(safe-area-inset-top, 0px);
    --safe-right: env(safe-area-inset-right, 0px);
    --safe-bottom: env(safe-area-inset-bottom, 0px);
    --safe-left: env(safe-area-inset-left, 0px);

    --overlay-blur: 14px;
  }

  /* Coarse pointers: every control reaches the touch target. */
  @media (pointer: coarse) {
    :where(:root) {
      --control-h-sm: 44px;
      --icon-button-size: 44px;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    :where(:root) {
      --duration-fast: 0ms;
      --duration-base: 0ms;
      --duration-slow: 0ms;
      --duration-slower: 0ms;
      --duration-spin: 1600ms;
    }
  }

  /* ── Theme: dark (default) ──────────────────────────────────────────────── */
  :where(:root),
  :where(html.theme-dark),
  html[data-theme="dark"] {
    color-scheme: dark;

    --color-bg-app: var(--neutral-975);
    --color-bg-surface: var(--neutral-925);
    --color-bg-surface-2: var(--neutral-910);
    --color-bg-elevated: var(--neutral-900);
    --color-bg-inset: var(--neutral-950);
    --color-bg-hover: var(--neutral-850);
    --color-bg-active: var(--neutral-800);
    --color-bg-disabled: var(--neutral-800);
    --color-bg-overlay: rgb(2 6 23 / 0.74);
    --color-bg-skeleton: var(--neutral-850);
    --color-bg-skeleton-shine: var(--neutral-800);

    --color-border: var(--neutral-800);
    --color-border-strong: var(--neutral-700);
    --color-border-hover: var(--neutral-600);
    --color-divider: var(--neutral-850);

    --color-text: var(--neutral-100);
    --color-text-strong: var(--neutral-0);
    --color-text-secondary: var(--neutral-300);
    --color-text-muted: var(--neutral-400);
    --color-text-subtle: var(--neutral-450);
    --color-text-disabled: var(--neutral-500);
    --color-text-link: var(--violet-300);

    --color-accent: var(--brand-500);
    --color-accent-hover: var(--brand-600);
    --color-accent-active: var(--brand-700);
    --color-on-accent: var(--neutral-0);
    --color-accent-soft: rgb(129 76 239 / 0.14);
    --color-accent-soft-hover: rgb(129 76 239 / 0.22);
    --color-accent-border: rgb(129 76 239 / 0.6);
    --color-accent-text: var(--violet-300);
    --color-focus-ring: var(--violet-400);
    --color-focus-glow: rgb(129 76 239 / 0.22);

    --color-on-status: var(--neutral-0);
    --color-danger: var(--red-600);
    --color-danger-hover: var(--red-700);
    --color-danger-soft: rgb(239 68 68 / 0.16);
    --color-danger-border: rgb(248 113 113 / 0.4);
    --color-danger-text: var(--red-300);
    --color-success: var(--emerald-700);
    --color-success-soft: rgb(16 185 129 / 0.14);
    --color-success-border: rgb(52 211 153 / 0.35);
    --color-success-text: var(--emerald-300);
    --color-warning: var(--amber-700);
    --color-warning-soft: rgb(245 158 11 / 0.14);
    --color-warning-border: rgb(251 191 36 / 0.35);
    --color-warning-text: var(--amber-200);
    --color-info: var(--sky-700);
    --color-info-soft: rgb(56 189 248 / 0.14);
    --color-info-border: rgb(56 189 248 / 0.35);
    --color-info-text: var(--sky-300);

    /* Categorical tints for app tiles and note colours (background / foreground). */
    --color-tint-violet-bg: rgb(129 76 239 / 0.16);
    --color-tint-violet-fg: var(--violet-300);
    --color-tint-blue-bg: rgb(59 130 246 / 0.16);
    --color-tint-blue-fg: var(--blue-300);
    --color-tint-sky-bg: rgb(56 189 248 / 0.16);
    --color-tint-sky-fg: var(--sky-300);
    --color-tint-teal-bg: rgb(20 184 166 / 0.16);
    --color-tint-teal-fg: var(--teal-300);
    --color-tint-green-bg: rgb(16 185 129 / 0.16);
    --color-tint-green-fg: var(--emerald-300);
    --color-tint-amber-bg: rgb(245 158 11 / 0.16);
    --color-tint-amber-fg: var(--amber-200);
    --color-tint-orange-bg: rgb(249 115 22 / 0.16);
    --color-tint-orange-fg: var(--orange-300);
    --color-tint-rose-bg: rgb(244 63 94 / 0.16);
    --color-tint-rose-fg: var(--rose-300);
    --color-tint-slate-bg: rgb(148 163 184 / 0.14);
    --color-tint-slate-fg: var(--neutral-300);

    --color-switch-track: var(--neutral-700);
    --color-switch-thumb: var(--neutral-0);
    --color-scrollbar: rgb(148 163 184 / 0.28);
    --color-selection: rgb(129 76 239 / 0.4);
    --color-meta-theme: var(--neutral-975);

    --shadow-xs: 0 1px 2px rgb(2 6 23 / 0.3);
    --shadow-sm: 0 2px 8px rgb(2 6 23 / 0.3);
    --shadow-md: 0 8px 24px rgb(0 0 0 / 0.4);
    --shadow-lg: 0 24px 60px rgb(0 0 0 / 0.55);
  }

  /* ── Theme: light ───────────────────────────────────────────────────────── */
  :where(html.theme-light:not(.theme-mono)),
  html[data-theme="light"] {
    color-scheme: light;

    --color-bg-app: var(--neutral-100);
    --color-bg-surface: var(--neutral-0);
    --color-bg-surface-2: var(--neutral-50);
    --color-bg-elevated: var(--neutral-0);
    --color-bg-inset: var(--neutral-0);
    --color-bg-hover: rgb(15 23 42 / 0.055);
    --color-bg-active: rgb(15 23 42 / 0.09);
    --color-bg-disabled: var(--neutral-200);
    --color-bg-overlay: rgb(15 23 42 / 0.36);
    --color-bg-skeleton: var(--neutral-200);
    --color-bg-skeleton-shine: var(--neutral-100);

    --color-border: rgb(15 23 42 / 0.12);
    --color-border-strong: rgb(15 23 42 / 0.22);
    --color-border-hover: rgb(15 23 42 / 0.34);
    --color-divider: rgb(15 23 42 / 0.08);

    --color-text: var(--neutral-900);
    --color-text-strong: var(--neutral-975);
    --color-text-secondary: var(--neutral-700);
    --color-text-muted: var(--neutral-600);
    --color-text-subtle: var(--neutral-550);
    --color-text-disabled: var(--neutral-400);
    --color-text-link: var(--violet-700);

    --color-accent: var(--brand-500);
    --color-accent-hover: var(--brand-600);
    --color-accent-active: var(--brand-700);
    --color-on-accent: var(--neutral-0);
    --color-accent-soft: rgb(124 58 237 / 0.1);
    --color-accent-soft-hover: rgb(124 58 237 / 0.16);
    --color-accent-border: rgb(124 58 237 / 0.5);
    --color-accent-text: var(--violet-700);
    --color-focus-ring: var(--violet-600);
    --color-focus-glow: rgb(124 58 237 / 0.18);

    --color-on-status: var(--neutral-0);
    --color-danger: var(--red-600);
    --color-danger-hover: var(--red-700);
    --color-danger-soft: rgb(220 38 38 / 0.08);
    --color-danger-border: rgb(220 38 38 / 0.3);
    --color-danger-text: var(--red-700);
    --color-success: var(--emerald-700);
    --color-success-soft: rgb(5 150 105 / 0.1);
    --color-success-border: rgb(5 150 105 / 0.3);
    --color-success-text: var(--emerald-800);
    --color-warning: var(--amber-700);
    --color-warning-soft: rgb(217 119 6 / 0.1);
    --color-warning-border: rgb(217 119 6 / 0.3);
    --color-warning-text: var(--amber-800);
    --color-info: var(--sky-700);
    --color-info-soft: rgb(2 132 199 / 0.08);
    --color-info-border: rgb(2 132 199 / 0.3);
    --color-info-text: var(--sky-800);

    --color-tint-violet-bg: rgb(124 58 237 / 0.1);
    --color-tint-violet-fg: var(--violet-700);
    --color-tint-blue-bg: rgb(37 99 235 / 0.1);
    --color-tint-blue-fg: var(--blue-700);
    --color-tint-sky-bg: rgb(2 132 199 / 0.1);
    --color-tint-sky-fg: var(--sky-700);
    --color-tint-teal-bg: rgb(13 148 136 / 0.1);
    --color-tint-teal-fg: var(--teal-700);
    --color-tint-green-bg: rgb(5 150 105 / 0.1);
    --color-tint-green-fg: var(--emerald-700);
    --color-tint-amber-bg: rgb(217 119 6 / 0.12);
    --color-tint-amber-fg: var(--amber-800);
    --color-tint-orange-bg: rgb(234 88 12 / 0.1);
    --color-tint-orange-fg: var(--orange-700);
    --color-tint-rose-bg: rgb(225 29 72 / 0.1);
    --color-tint-rose-fg: var(--rose-700);
    --color-tint-slate-bg: rgb(15 23 42 / 0.06);
    --color-tint-slate-fg: var(--neutral-600);

    --color-switch-track: var(--neutral-300);
    --color-switch-thumb: var(--neutral-0);
    --color-scrollbar: rgb(15 23 42 / 0.22);
    --color-selection: rgb(124 58 237 / 0.2);
    --color-meta-theme: var(--neutral-100);

    --shadow-xs: 0 1px 2px rgb(15 23 42 / 0.05);
    --shadow-sm: 0 2px 8px rgb(15 23 42 / 0.08);
    --shadow-md: 0 8px 24px rgb(15 23 42 / 0.12);
    --shadow-lg: 0 24px 60px rgb(15 23 42 / 0.18);
  }

  /* ── Mono themes: greys of equal luminance, the accent becomes contrast ─── */
  /* Status hues stay (muted) so danger and success keep their meaning. */
  :where(html.theme-mono.theme-light),
  html[data-theme="mono-light"] {
    color-scheme: light;

    --color-bg-app: var(--gray-100);
    --color-bg-surface: var(--gray-0);
    --color-bg-surface-2: var(--gray-50);
    --color-bg-elevated: var(--gray-0);
    --color-bg-inset: var(--gray-0);
    --color-bg-hover: rgb(0 0 0 / 0.05);
    --color-bg-active: rgb(0 0 0 / 0.09);
    --color-bg-disabled: var(--gray-200);
    --color-bg-overlay: rgb(0 0 0 / 0.36);
    --color-bg-skeleton: var(--gray-200);
    --color-bg-skeleton-shine: var(--gray-100);

    --color-border: rgb(0 0 0 / 0.12);
    --color-border-strong: rgb(0 0 0 / 0.24);
    --color-border-hover: rgb(0 0 0 / 0.36);
    --color-divider: rgb(0 0 0 / 0.08);

    --color-text: var(--gray-900);
    --color-text-strong: var(--gray-950);
    --color-text-secondary: var(--gray-700);
    --color-text-muted: var(--gray-600);
    --color-text-subtle: var(--gray-550);
    --color-text-disabled: var(--gray-400);
    --color-text-link: var(--gray-900);

    --color-accent: var(--gray-900);
    --color-accent-hover: var(--gray-700);
    --color-accent-active: var(--gray-600);
    --color-on-accent: var(--gray-0);
    --color-accent-soft: rgb(0 0 0 / 0.06);
    --color-accent-soft-hover: rgb(0 0 0 / 0.1);
    --color-accent-border: rgb(0 0 0 / 0.5);
    --color-accent-text: var(--gray-900);
    --color-focus-ring: var(--gray-900);
    --color-focus-glow: rgb(0 0 0 / 0.14);

    --color-on-status: var(--gray-0);
    --color-danger: var(--red-700);
    --color-danger-hover: var(--red-800);
    --color-danger-soft: rgb(185 28 28 / 0.08);
    --color-danger-border: rgb(185 28 28 / 0.3);
    --color-danger-text: var(--red-700);
    --color-success: var(--emerald-700);
    --color-success-soft: rgb(0 0 0 / 0.05);
    --color-success-border: rgb(0 0 0 / 0.2);
    --color-success-text: var(--emerald-800);
    --color-warning: var(--amber-700);
    --color-warning-soft: rgb(0 0 0 / 0.05);
    --color-warning-border: rgb(0 0 0 / 0.2);
    --color-warning-text: var(--amber-800);
    --color-info: var(--gray-700);
    --color-info-soft: rgb(0 0 0 / 0.05);
    --color-info-border: rgb(0 0 0 / 0.2);
    --color-info-text: var(--gray-700);

    --color-tint-violet-bg: rgb(0 0 0 / 0.06);
    --color-tint-violet-fg: var(--gray-900);
    --color-tint-blue-bg: rgb(0 0 0 / 0.06);
    --color-tint-blue-fg: var(--gray-900);
    --color-tint-sky-bg: rgb(0 0 0 / 0.06);
    --color-tint-sky-fg: var(--gray-900);
    --color-tint-teal-bg: rgb(0 0 0 / 0.06);
    --color-tint-teal-fg: var(--gray-900);
    --color-tint-green-bg: rgb(0 0 0 / 0.06);
    --color-tint-green-fg: var(--gray-900);
    --color-tint-amber-bg: rgb(0 0 0 / 0.06);
    --color-tint-amber-fg: var(--gray-900);
    --color-tint-orange-bg: rgb(0 0 0 / 0.06);
    --color-tint-orange-fg: var(--gray-900);
    --color-tint-rose-bg: rgb(0 0 0 / 0.06);
    --color-tint-rose-fg: var(--gray-900);
    --color-tint-slate-bg: rgb(0 0 0 / 0.06);
    --color-tint-slate-fg: var(--gray-700);

    --color-switch-track: var(--gray-300);
    --color-switch-thumb: var(--gray-0);
    --color-scrollbar: rgb(0 0 0 / 0.22);
    --color-selection: rgb(0 0 0 / 0.16);
    --color-meta-theme: var(--gray-100);

    --shadow-xs: 0 1px 2px rgb(0 0 0 / 0.05);
    --shadow-sm: 0 2px 8px rgb(0 0 0 / 0.08);
    --shadow-md: 0 8px 24px rgb(0 0 0 / 0.12);
    --shadow-lg: 0 24px 60px rgb(0 0 0 / 0.18);
  }

  :where(html.theme-mono:not(.theme-light)),
  html[data-theme="mono-dark"] {
    color-scheme: dark;

    --color-bg-app: var(--gray-950);
    --color-bg-surface: var(--gray-900);
    --color-bg-surface-2: var(--gray-850);
    --color-bg-elevated: var(--gray-850);
    --color-bg-inset: var(--gray-925);
    --color-bg-hover: var(--gray-800);
    --color-bg-active: var(--gray-750);
    --color-bg-disabled: var(--gray-800);
    --color-bg-overlay: rgb(0 0 0 / 0.72);
    --color-bg-skeleton: var(--gray-800);
    --color-bg-skeleton-shine: var(--gray-700);

    --color-border: var(--gray-800);
    --color-border-strong: var(--gray-700);
    --color-border-hover: var(--gray-600);
    --color-divider: var(--gray-850);

    --color-text: var(--gray-100);
    --color-text-strong: var(--gray-0);
    --color-text-secondary: var(--gray-300);
    --color-text-muted: var(--gray-400);
    --color-text-subtle: var(--gray-450);
    --color-text-disabled: var(--gray-500);
    --color-text-link: var(--gray-50);

    --color-accent: var(--gray-100);
    --color-accent-hover: var(--gray-300);
    --color-accent-active: var(--gray-400);
    --color-on-accent: var(--gray-900);
    --color-accent-soft: rgb(255 255 255 / 0.08);
    --color-accent-soft-hover: rgb(255 255 255 / 0.13);
    --color-accent-border: rgb(255 255 255 / 0.5);
    --color-accent-text: var(--gray-50);
    --color-focus-ring: var(--gray-100);
    --color-focus-glow: rgb(255 255 255 / 0.16);

    --color-on-status: var(--gray-0);
    --color-danger: var(--red-700);
    --color-danger-hover: var(--red-800);
    --color-danger-soft: rgb(239 68 68 / 0.14);
    --color-danger-border: rgb(248 113 113 / 0.35);
    --color-danger-text: var(--red-300);
    --color-success: var(--emerald-700);
    --color-success-soft: rgb(255 255 255 / 0.06);
    --color-success-border: rgb(255 255 255 / 0.2);
    --color-success-text: var(--emerald-300);
    --color-warning: var(--amber-700);
    --color-warning-soft: rgb(255 255 255 / 0.06);
    --color-warning-border: rgb(255 255 255 / 0.2);
    --color-warning-text: var(--amber-200);
    --color-info: var(--gray-600);
    --color-info-soft: rgb(255 255 255 / 0.06);
    --color-info-border: rgb(255 255 255 / 0.2);
    --color-info-text: var(--gray-200);

    --color-tint-violet-bg: rgb(255 255 255 / 0.08);
    --color-tint-violet-fg: var(--gray-100);
    --color-tint-blue-bg: rgb(255 255 255 / 0.08);
    --color-tint-blue-fg: var(--gray-100);
    --color-tint-sky-bg: rgb(255 255 255 / 0.08);
    --color-tint-sky-fg: var(--gray-100);
    --color-tint-teal-bg: rgb(255 255 255 / 0.08);
    --color-tint-teal-fg: var(--gray-100);
    --color-tint-green-bg: rgb(255 255 255 / 0.08);
    --color-tint-green-fg: var(--gray-100);
    --color-tint-amber-bg: rgb(255 255 255 / 0.08);
    --color-tint-amber-fg: var(--gray-100);
    --color-tint-orange-bg: rgb(255 255 255 / 0.08);
    --color-tint-orange-fg: var(--gray-100);
    --color-tint-rose-bg: rgb(255 255 255 / 0.08);
    --color-tint-rose-fg: var(--gray-100);
    --color-tint-slate-bg: rgb(255 255 255 / 0.06);
    --color-tint-slate-fg: var(--gray-300);

    --color-switch-track: var(--gray-700);
    --color-switch-thumb: var(--gray-0);
    --color-scrollbar: rgb(255 255 255 / 0.22);
    --color-selection: rgb(255 255 255 / 0.24);
    --color-meta-theme: var(--gray-950);

    --shadow-xs: 0 1px 2px rgb(0 0 0 / 0.4);
    --shadow-sm: 0 2px 8px rgb(0 0 0 / 0.4);
    --shadow-md: 0 8px 24px rgb(0 0 0 / 0.5);
    --shadow-lg: 0 24px 60px rgb(0 0 0 / 0.6);
  }
}