/*
 * Huddlr design tokens — "Weight" identity (2026-11).
 *
 * Weight is the signal: one variable face (Hanken Grotesk) whose weight
 * follows activity, a monumental channel title, and mono readouts for times
 * and counts. Navy is the committed rail, paper is the ground, turquoise is
 * the live colour; amber (--fp-signal, "Amber") is reserved for what is for you:
 * mention chips, the mention highlighter and the unread divider (it was yellow,
 * then turquoise, then orange, in earlier rounds; the name is kept for the stylesheets that read it).
 *
 * Keep using these variables rather than literal colors; the --ctx-* names
 * are what every older stylesheet is written against, the --fp-* names are
 * the new identity's own vocabulary.
 */

@font-face { font-family: "Hanken Grotesk"; src: url("/fonts/hanken-grotesk-latin-wght.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }

:root {
  /* Brand */
  --ctx-navy: #0a2540;
  --ctx-turquoise: #00c6c8;
  --ctx-turquoise-hover: #00b0b2;
  --ctx-mist: #eef4f7;

  /* Fahrplan vocabulary */
  --fp-ink: #0a2540;
  --fp-rail: #0a2540;
  --fp-rail-deep: #06182c;
  --fp-rail-line: #1b3d5c;
  --fp-rail-text: #cfe0ea;
  --fp-rail-muted: #8fb0c4;
  --fp-hairline: #c9d9e2;
  --fp-hairline-soft: #dde8ee;
  --fp-signal: #f2b53c;
  --fp-signal-ink: #0a2540;
  --fp-signal-soft: #fdf0d0;
  --fp-live: #00c6c8;

  /* Legacy names still used by older components */
  --ctx-brand-50: var(--ctx-mist);
  --ctx-brand-100: #d9f4f4;
  --ctx-brand-500: var(--ctx-turquoise);
  --ctx-brand-600: var(--ctx-turquoise-hover);
  --ctx-brand-900: var(--ctx-navy);

  /* Surface */
  --ctx-bg: #f6f9fb;
  --ctx-bg-subtle: #eef4f7;
  --ctx-bg-elevated: #ffffff;
  --ctx-border: #c9d9e2;
  --ctx-soft-accent: #d9f4f4;
  --ctx-accent-text: #00595b;
  --ctx-shadow: 0 10px 30px #0a254022;
  color-scheme: light;

  /* Text */
  --ctx-text: var(--ctx-navy);
  --ctx-text-muted: #435f74;
  --ctx-text-on-brand: var(--ctx-navy);

  /* State */
  --ctx-focus-ring: #0a2540;
  --ctx-danger: #b3261e;
  --ctx-danger-bg: #fdeaea;
  --ctx-danger-solid: #c23b3b;
  --ctx-danger-solid-hover: #a93131;
  --ctx-success: #15803d;

  /* Type */
  --ctx-font-sans: "Hanken Grotesk", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --ctx-font-mono: ui-monospace, "SF Mono", "Cascadia Mono", Consolas, monospace;

  /* Spacing scale */
  --ctx-space-1: 4px;
  --ctx-space-2: 8px;
  --ctx-space-3: 12px;
  --ctx-space-4: 16px;
  --ctx-space-6: 24px;
  --ctx-space-8: 32px;

  /* Timetable corners: nearly square, a 3px softening and nothing more */
  --ctx-radius-sm: 2px;
  --ctx-radius-md: 4px;

  --ctx-sidebar-width: 264px;
  --fp-time-col: 90px;

  /* Avatar fallbacks: four tones of the navy/turquoise family */
  --ctx-avatar-1-bg: #0a2540;
  --ctx-avatar-1-text: #ffffff;
  --ctx-avatar-2-bg: #1d4f6f;
  --ctx-avatar-2-text: #ffffff;
  --ctx-avatar-3-bg: #00595b;
  --ctx-avatar-3-text: #ffffff;
  --ctx-avatar-4-bg: #3d7088;
  --ctx-avatar-4-text: #ffffff;
}

/*
 * Dark: the departure-board night shift. Navy is the paper, the hairlines
 * lighten rather than the ink darkening, and signal-yellow keeps its job.
 */
/* Dark follows the system only for an explicit "Match system" (data-theme="auto"); light is the default. */
@media (prefers-color-scheme: dark) {
  :root[data-theme="auto"] {
    --ctx-bg: #10304f;
    --ctx-bg-subtle: #081d33;
    --ctx-bg-elevated: #17395b;
    --ctx-border: #2c5272;
    --ctx-text: #e8f1f6;
    --ctx-text-muted: #9db8c9;
    --ctx-soft-accent: #0d3d4a;
    --ctx-accent-text: #6be8ea;
    --ctx-focus-ring: #6be8ea;
    --ctx-shadow: 0 10px 30px #0006;
    --ctx-danger: #ffb4b4;
    --ctx-danger-bg: #4a1f24;
    color-scheme: dark;
    --fp-hairline: #2c5272;
    --fp-hairline-soft: #1a3a58;
    --fp-signal-soft: #3d3520;
    --ctx-avatar-1-bg: #2f6f94;
    --ctx-avatar-2-bg: #2a5a7d;
    --ctx-avatar-2-text: #ffffff;
    --ctx-avatar-3-bg: #0d5a5c;
    --ctx-avatar-4-bg: #2c5a74;
    --ctx-avatar-4-text: #e8f1f6;
  }
}

:root[data-theme="dark"] {
  --ctx-bg: #10304f;
  --ctx-bg-subtle: #081d33;
  --ctx-bg-elevated: #17395b;
  --ctx-border: #2c5272;
  --ctx-text: #e8f1f6;
  --ctx-text-muted: #9db8c9;
  --ctx-soft-accent: #0d3d4a;
  --ctx-accent-text: #6be8ea;
  --ctx-focus-ring: #6be8ea;
  --ctx-shadow: 0 10px 30px #0006;
  --ctx-danger: #ffb4b4;
  --ctx-danger-bg: #4a1f24;
  color-scheme: dark;
  --fp-hairline: #2c5272;
  --fp-hairline-soft: #1a3a58;
  --fp-signal-soft: #3d3520;
  --ctx-avatar-1-bg: #2f6f94;
  --ctx-avatar-2-bg: #2a5a7d;
  --ctx-avatar-2-text: #ffffff;
  --ctx-avatar-3-bg: #0d5a5c;
  --ctx-avatar-4-bg: #2c5a74;
  --ctx-avatar-4-text: #e8f1f6;
}

/* Browser surfaces the page did not draw, themed from the palette. */
::selection { background: #9be9ea; color: var(--ctx-navy); }
html { caret-color: var(--ctx-turquoise); scrollbar-color: var(--fp-hairline) transparent; }
time, .tabular { font-variant-numeric: tabular-nums; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}