/*
  Design tokens: "Departure"
  A contemporary developer-tool look. Near-black ground with two raised
  surfaces and hairline borders, monochrome text, white pill buttons, and one
  international-orange accent spent only on focus, status and the cursor.
  Departure Mono (pixel) for display and labels; Host Grotesk for reading.

  Scales
    type     Departure Mono sizes are multiples of 11px (its pixel grid);
             Host Grotesk runs on a 1.25 scale from 16px
    spacing  Tailwind steps (1 = 0.25rem)
    radius   pill for buttons and chips, 12px for panels, 6px for small boxes

  Variants
    dark (default)  bare :root
    light           prefers-color-scheme: light, or [data-theme="light"]
    high contrast   prefers-contrast: more, or [data-contrast="more"];
                    layers on either theme through its own --hc-* values
*/

@font-face {
  font-family: "Departure Mono";
  src: url("/public/fonts/DepartureMono-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ---------- Color: dark ---------- */
  --bg: #0a0a0b;                /* near-black, not #000 */
  --surface-1: #111113;         /* panels, cards */
  --surface-2: #18181b;         /* raised rows, inputs, hover */
  --border: #232327;            /* hairlines */
  --border-strong: #3a3a40;     /* control edges, focus-adjacent */
  --text: #ededef;
  --text-muted: #a1a1aa;        /* 7.9:1 on bg */
  --text-faint: #8b8b95;        /* 5.9:1 on bg, 5.1:1 on surfaces; labels only */
  --accent: #ff6a2b;            /* international orange */
  --accent-text: #ff8a57;       /* accent used as text, 7.1:1 on bg */
  --signal: #3ddc97;            /* status dot */
  --btn-bg: #ededef;            /* primary pill */
  --btn-text: #0a0a0b;
  --btn-bg-hover: #ffffff;
  --glow: rgb(255 106 43 / 0.16);
  --glow-2: rgb(255 255 255 / 0.06);
  --shadow-panel: 0 0 0 1px rgb(255 255 255 / 0.02), 0 24px 64px -24px rgb(0 0 0 / 0.7);
  --spot: rgb(255 255 255 / 0.06);
  --todo: #a1a1aa;
  --todo-line: #4a4a52;
  --selection: rgb(255 106 43 / 0.32);

  --hc-bg: #000000;
  --hc-surface-1: #000000;
  --hc-surface-2: #121212;
  --hc-border: #9a9aa2;
  --hc-border-strong: #ffffff;
  --hc-text: #ffffff;
  --hc-text-muted: #e4e4e7;
  --hc-text-faint: #d4d4d8;
  --hc-accent: #ff9a6b;
  --hc-accent-text: #ffb38f;
  --hc-todo: #e4e4e7;
  --hc-todo-line: #d4d4d8;

  color-scheme: dark;

  /* ---------- Type ---------- */
  --font-pixel: "Departure Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --font-sans: "Host Grotesk", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Departure Mono: multiples of 11px stay pixel-sharp */
  --px-1: 0.6875rem;  /* 11  labels, tags, keycaps */
  --px-2: 1.375rem;   /* 22  small display */
  --px-3: 2.0625rem;  /* 33  */
  --px-4: 2.75rem;    /* 44  phone display */
  --px-6: 4.125rem;   /* 66  */
  --px-8: 5.5rem;     /* 88  desktop display */

  /* Host Grotesk: 1.25 scale */
  --t-sm: 0.875rem;   /* 14 */
  --t-base: 1rem;     /* 16 */
  --t-lg: 1.25rem;    /* 20 */
  --t-xl: 1.5625rem;  /* 25 */
  --t-2xl: 1.953rem;  /* 31 */
  --t-3xl: 2.441rem;  /* 39 */
  --t-4xl: 3.052rem;  /* 49 */

  --leading-tight: 1.1;
  --leading-snug: 1.35;
  --leading-body: 1.6;
  --tracking-heading: -0.03em;
  --tracking-pixel: 0.02em;
  --tracking-label: 0.08em;

  /* ---------- Spacing (Tailwind 1 = 0.25rem) ---------- */
  --s-1: 0.25rem;
  --s-2: 0.5rem;
  --s-3: 0.75rem;
  --s-4: 1rem;
  --s-5: 1.25rem;
  --s-6: 1.5rem;
  --s-8: 2rem;
  --s-10: 2.5rem;
  --s-12: 3rem;
  --s-16: 4rem;
  --s-20: 5rem;
  --s-24: 6rem;
  --s-32: 8rem;

  /* ---------- Radius ---------- */
  --r-sm: 0.375rem;   /* keycaps, tags, small boxes */
  --r-md: 0.75rem;    /* panels and cards */
  --r-pill: 9999px;   /* buttons, chips */

  /* ---------- Layout & motion ---------- */
  --wrap: 72rem;
  --measure: 62ch;
  --tap: 2.75rem;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --d-fast: 150ms;
  --d: 200ms;
  --d-slow: 250ms;
}

/* ---------- Light ---------- */
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --bg: #fafafa;
    --surface-1: #ffffff;
    --surface-2: #f4f4f5;
    --border: #e4e4e7;
    --border-strong: #c4c4cc;
    --text: #0a0a0b;
    --text-muted: #52525b;      /* 7.4:1 on bg */
    --text-faint: #6b6b74;      /* 5.1:1 on bg */
    --accent: #e0531a;
    --accent-text: #b3400f;     /* 5.6:1 on bg */
    --signal: #0f9d63;
    --btn-bg: #0a0a0b;
    --btn-text: #fafafa;
    --btn-bg-hover: #27272a;
    --glow: rgb(255 106 43 / 0.14);
    --glow-2: rgb(10 10 11 / 0.04);
    --shadow-panel: 0 1px 2px rgb(10 10 11 / 0.04), 0 24px 48px -24px rgb(10 10 11 / 0.18);
    --spot: rgb(10 10 11 / 0.035);
    --todo: #52525b;
    --todo-line: #b4b4bc;
    --selection: rgb(224 83 26 / 0.2);

    --hc-bg: #ffffff;
    --hc-surface-1: #ffffff;
    --hc-surface-2: #f0f0f0;
    --hc-border: #5c5c5c;
    --hc-border-strong: #000000;
    --hc-text: #000000;
    --hc-text-muted: #1f1f23;
    --hc-text-faint: #1f1f23;
    --hc-accent: #9a3209;
    --hc-accent-text: #8a2c07;
    --hc-todo: #1f1f23;
    --hc-todo-line: #1f1f23;

    color-scheme: light;
  }
}

:root[data-theme="light"] {
  --bg: #fafafa;
  --surface-1: #ffffff;
  --surface-2: #f4f4f5;
  --border: #e4e4e7;
  --border-strong: #c4c4cc;
  --text: #0a0a0b;
  --text-muted: #52525b;
  --text-faint: #6b6b74;
  --accent: #e0531a;
  --accent-text: #b3400f;
  --signal: #0f9d63;
  --btn-bg: #0a0a0b;
  --btn-text: #fafafa;
  --btn-bg-hover: #27272a;
  --glow: rgb(255 106 43 / 0.14);
  --glow-2: rgb(10 10 11 / 0.04);
  --shadow-panel: 0 1px 2px rgb(10 10 11 / 0.04), 0 24px 48px -24px rgb(10 10 11 / 0.18);
  --spot: rgb(10 10 11 / 0.035);
  --todo: #52525b;
  --todo-line: #b4b4bc;
  --selection: rgb(224 83 26 / 0.2);

  --hc-bg: #ffffff;
  --hc-surface-1: #ffffff;
  --hc-surface-2: #f0f0f0;
  --hc-border: #5c5c5c;
  --hc-border-strong: #000000;
  --hc-text: #000000;
  --hc-text-muted: #1f1f23;
  --hc-text-faint: #1f1f23;
  --hc-accent: #9a3209;
  --hc-accent-text: #8a2c07;
  --hc-todo: #1f1f23;
  --hc-todo-line: #1f1f23;

  color-scheme: light;
}

/* ---------- High contrast (on top of either theme) ---------- */
@media (prefers-contrast: more) {
  :root:not([data-contrast="normal"]) {
    --bg: var(--hc-bg);
    --surface-1: var(--hc-surface-1);
    --surface-2: var(--hc-surface-2);
    --border: var(--hc-border);
    --border-strong: var(--hc-border-strong);
    --text: var(--hc-text);
    --text-muted: var(--hc-text-muted);
    --text-faint: var(--hc-text-faint);
    --accent: var(--hc-accent);
    --accent-text: var(--hc-accent-text);
    --todo: var(--hc-todo);
    --todo-line: var(--hc-todo-line);
    --glow: transparent;
    --glow-2: transparent;
    --spot: transparent;
    --shadow-panel: none;
  }
}

:root[data-contrast="more"] {
  --bg: var(--hc-bg);
  --surface-1: var(--hc-surface-1);
  --surface-2: var(--hc-surface-2);
  --border: var(--hc-border);
  --border-strong: var(--hc-border-strong);
  --text: var(--hc-text);
  --text-muted: var(--hc-text-muted);
  --text-faint: var(--hc-text-faint);
  --accent: var(--hc-accent);
  --accent-text: var(--hc-accent-text);
  --todo: var(--hc-todo);
  --todo-line: var(--hc-todo-line);
  --glow: transparent;
  --glow-2: transparent;
  --spot: transparent;
  --shadow-panel: none;
}