/**
 * Halo design tokens.
 *
 * The visual language is Nocturne's — an indigo-tinted dark ground, outline
 * controls, hairline-ring elevation and soft radii — with two departures:
 *
 *   1. **Monospace everywhere.** Display, UI and code share one face
 *      (JetBrains Mono). Not a code affectation: it is the system's voice, and
 *      the thing that stops the palette reading as a generic dark theme.
 *   2. Where Nocturne is a `mono` palette at saturation 0.12, Halo is
 *      **multi-hue semantic** at roughly 1.5x that, so each role owns a hue and
 *      colour carries meaning rather than decoration.
 *
 * The ground stays quiet on purpose. An accent-lit ground was tried and
 * reverted — it changed the mood without making the system more particular.
 *
 * Halo is dark-first. Dark is the default and the identity; the light variant
 * is fully specified, not a fallback.
 */

/* ── Dark: the default and the signature ────────────────────────────── */
:root,
[data-halo-theme='dark'] {
  /* Ground — Nocturne's indigo-tinted dark, not a neutral black. */
  --halo-color-bg: #161826;
  --halo-color-surface: #232532;
  --halo-color-surface-raised: #2c2f3e;
  --halo-color-surface-sunken: #101220;

  --halo-color-text: #e9e9ed;
  --halo-color-text-muted: #9397ab;
  --halo-color-text-subtle: #75798c;
  --halo-color-text-inverse: #161826;

  /* Nocturne's divider: the text colour at 16%, so it rides any surface. */
  --halo-color-border: color-mix(in srgb, #e9e9ed 16%, transparent);
  --halo-color-border-strong: color-mix(in srgb, #e9e9ed 32%, transparent);
  --halo-color-ring: #3f424d;

  /* ── Semantic hues — each role owns one ─────────────────────────── */
  --halo-color-accent: #8b7cf0;          /* blurple, hue 230 anchor      */
  --halo-color-accent-hover: #a08ff5;
  --halo-color-accent-active: #b5a6f8;
  --halo-color-accent-subtle: #2b2745;
  --halo-color-accent-text: #12111f;

  --halo-color-accent-2: #a79bef;        /* orchid                       */
  --halo-color-accent-2-subtle: #302c4c;

  --halo-color-info: #4fa8e8;            /* azure                        */
  --halo-color-info-subtle: #14293c;
  --halo-color-success: #3fbf95;         /* emerald                      */
  --halo-color-success-subtle: #12332a;
  --halo-color-warning: #d9a23f;         /* amber                        */
  --halo-color-warning-subtle: #362a12;
  --halo-color-danger: #e0708a;          /* rose                         */
  --halo-color-danger-hover: #e88a9f;
  --halo-color-danger-subtle: #3a1a24;

  --halo-color-highlight: #d9a23f;
  --halo-color-highlight-subtle: #362a12;
  --halo-color-highlight-text: #161826;

  --halo-color-focus-ring: #8b7cf0;
  --halo-color-overlay: color-mix(in srgb, #0b0c14 62%, transparent);

  /* Elevation — a hairline ring plus ambient darkness (Nocturne's model). */
  --halo-shadow-none: none;
  --halo-shadow-sm: 0 0 0 1px #3f424d;
  --halo-shadow-md: 0 0 0 1px #4a4d59, 0 6px 18px rgb(0 0 0 / 0.55);
  --halo-shadow-lg: 0 0 0 1px #595d6c, 0 16px 40px rgb(0 0 0 / 0.65);
  --halo-shadow-xl: 0 0 0 1px #75798c, 0 28px 64px rgb(0 0 0 / 0.72);

  /* Tonal ramps, shared lightness scale — filled tags read -800 on -100. */
  --halo-neutral-100: #f3f5fe;
  --halo-neutral-200: #e4e7f5;
  --halo-neutral-300: #cfd3e5;
  --halo-neutral-400: #b2b6ca;
  --halo-neutral-500: #9397ab;
  --halo-neutral-600: #75798c;
  --halo-neutral-700: #595d6c;
  --halo-neutral-800: #3f424d;
  --halo-neutral-900: #292b31;

  --halo-accent-100: #f2f0ff;
  --halo-accent-200: #e3dfff;
  --halo-accent-300: #cbc2fd;
  --halo-accent-400: #ad9dfa;
  --halo-accent-500: #8b7cf0;
  --halo-accent-600: #6e5ed2;
  --halo-accent-700: #5546a6;
  --halo-accent-800: #3c3175;
  --halo-accent-900: #262046;
}

/* ── Light: fully specified, never a fallback ───────────────────────── */
[data-halo-theme='light'] {
  --halo-color-bg: #f7f7fb;
  --halo-color-surface: #ffffff;
  --halo-color-surface-raised: #ffffff;
  --halo-color-surface-sunken: #eeeef5;

  --halo-color-text: #1a1b26;
  --halo-color-text-muted: #595d6c;
  --halo-color-text-subtle: #75798c;
  --halo-color-text-inverse: #f7f7fb;

  --halo-color-border: color-mix(in srgb, #1a1b26 14%, transparent);
  --halo-color-border-strong: color-mix(in srgb, #1a1b26 28%, transparent);
  --halo-color-ring: #cfd3e5;

  /* Same hues, darkened to hold contrast on a light ground. */
  --halo-color-accent: #6244d8;
  --halo-color-accent-hover: #5236c4;
  --halo-color-accent-active: #422aa6;
  --halo-color-accent-subtle: #eee9ff;
  --halo-color-accent-text: #ffffff;

  --halo-color-accent-2: #7d6cc9;
  --halo-color-accent-2-subtle: #efecfa;

  --halo-color-info: #1f6fb2;
  --halo-color-info-subtle: #e4f0fa;
  --halo-color-success: #12795a;
  --halo-color-success-subtle: #e0f4ed;
  --halo-color-warning: #97661a;
  --halo-color-warning-subtle: #fbf0dc;
  --halo-color-danger: #b83e5c;
  --halo-color-danger-hover: #9e3350;
  --halo-color-danger-subtle: #fce8ed;

  --halo-color-highlight: #97661a;
  --halo-color-highlight-subtle: #fbf0dc;
  --halo-color-highlight-text: #ffffff;

  --halo-color-focus-ring: #6244d8;
  --halo-color-overlay: color-mix(in srgb, #1a1b26 42%, transparent);

  --halo-shadow-none: none;
  --halo-shadow-sm: 0 0 0 1px #e4e7f5;
  --halo-shadow-md: 0 0 0 1px #e4e7f5, 0 6px 18px rgb(26 27 38 / 0.10);
  --halo-shadow-lg: 0 0 0 1px #cfd3e5, 0 16px 40px rgb(26 27 38 / 0.14);
  --halo-shadow-xl: 0 0 0 1px #cfd3e5, 0 28px 64px rgb(26 27 38 / 0.18);

  --halo-neutral-100: #292b31;
  --halo-neutral-200: #3f424d;
  --halo-neutral-300: #595d6c;
  --halo-neutral-400: #75798c;
  --halo-neutral-500: #9397ab;
  --halo-neutral-600: #b2b6ca;
  --halo-neutral-700: #cfd3e5;
  --halo-neutral-800: #e4e7f5;
  --halo-neutral-900: #f3f5fe;

  --halo-accent-100: #262046;
  --halo-accent-200: #3c3175;
  --halo-accent-300: #5546a6;
  --halo-accent-400: #6e5ed2;
  --halo-accent-500: #8b7cf0;
  --halo-accent-600: #ad9dfa;
  --halo-accent-700: #cbc2fd;
  --halo-accent-800: #e3dfff;
  --halo-accent-900: #f2f0ff;
}

/* ── Theme-independent scales ───────────────────────────────────────── */
:root {
  /* One face for the whole system — display, UI and code alike. */
  --halo-font-display: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --halo-font-sans: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --halo-font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Nocturne's type scale: body 15px, h1 42 down to h6 13. */
  --halo-text-xs: 0.6875rem;    /* 11px */
  --halo-text-sm: 0.8125rem;    /* 13px */
  --halo-text-md: 0.875rem;     /* 14px */
  --halo-text-lg: 1.125rem;     /* 18px */
  --halo-text-xl: 1.25rem;      /* 20px */
  --halo-text-2xl: 1.5625rem;   /* 25px */
  --halo-text-3xl: 2rem;        /* 32px */
  --halo-text-4xl: 2.625rem;    /* 42px */
  --halo-text-5xl: 3.5rem;      /* 56px */

  --halo-leading-tight: 1.12;
  --halo-leading-snug: 1.3;
  --halo-leading-normal: 1.55;
  --halo-leading-relaxed: 1.75;

  --halo-weight-regular: 400;
  --halo-weight-medium: 500;
  --halo-weight-semibold: 600;
  --halo-weight-bold: 700;
  /* Headings sit at 500, as Nocturne's `headingWeight` does — not bold. */
  --halo-weight-heading: 500;

  --halo-tracking-display: -0.03em;
  --halo-tracking-normal: 0;
  --halo-tracking-wide: 0.02em;
  --halo-tracking-caps: 0.12em;

  /* Space — Nocturne's 2.8px base (density 0.7). */
  --halo-space-0: 0;
  --halo-space-1: 2.8px;
  --halo-space-2: 5.6px;
  --halo-space-3: 8.4px;
  --halo-space-4: 11.2px;
  --halo-space-5: 16.8px;
  --halo-space-6: 22.4px;
  --halo-space-7: 33.6px;
  --halo-space-8: 44.8px;
  --halo-space-9: 67.2px;

  --halo-radius-none: 0;
  --halo-radius-sm: 4px;
  --halo-radius-md: 8px;
  --halo-radius-lg: 14px;
  --halo-radius-full: 9999px;

  --halo-border-width: 1px;
  --halo-border-width-thick: 2px;

  --halo-control-height-sm: 30px;
  --halo-control-height-md: 36px;
  --halo-control-height-lg: 44px;

  /* The end-fade ramp on freestanding rules — a Nocturne signature. */
  --halo-rule-fade: 48px;

  --halo-duration-fast: 90ms;
  --halo-duration-base: 160ms;
  --halo-easing: cubic-bezier(0.2, 0, 0, 1);

  --halo-z-dropdown: 1000;
  --halo-z-sticky: 1100;
  --halo-z-overlay: 1200;
  --halo-z-modal: 1300;
  --halo-z-toast: 1400;
  --halo-z-tooltip: 1500;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --halo-duration-fast: 1ms;
    --halo-duration-base: 1ms;
  }
}