@import url("https://fonts.googleapis.com/css2?family=Familjen+Grotesk:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&display=swap");

:root {
  --font-family-sans: "Familjen Grotesk", sans-serif;
  --font-family-mono: "IBM Plex Mono", monospace;
  --font-family-serif: "Familjen Grotesk", sans-serif;
  --font-family-ui-alt: "Familjen Grotesk", sans-serif;

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

  --type-size-1: 10px;
  --type-size-2: 11px;
  --type-size-3: 12px;
  --type-size-4: 13px;
  --type-size-5: 16px;
  --type-size-6: 20px;
  --type-size-7: 28px;

  --font-size-2xs: var(--type-size-1);
  --font-size-xs: var(--type-size-1);
  --font-size-sm: var(--type-size-2);
  --font-size-md: var(--type-size-3);
  --font-size-base: var(--type-size-4);
  --font-size-lg: var(--type-size-5);
  --font-size-xl: var(--type-size-5);
  --font-size-2xl: var(--type-size-6);
  --font-size-hero: var(--type-size-7);

  --line-height-tight: 1.05;
  --line-height-ui: 1.15;
  --line-height-copy: 1.5;

  --color-bg-page: #080c14;
  --color-bg-panel: #0d1321;
  --color-bg-panel-alt: #111827;
  --color-bg-deep: #050913;
  --color-bg-grid: #0a1120;
  --color-bg-gap: #08101b;
  --color-bg-surface-input: #10151b;
  --color-bg-surface-chip: #151b22;
  --color-bg-surface-table: #10161c;
  --color-bg-surface-gap: #0b1015;
  --color-bg-surface-tooltip: #141a21;
  --color-bg-overlay: rgba(8, 12, 20, 0.92);
  --color-bg-overlay-strong: rgba(8, 12, 20, 0.95);
  --color-bg-overlay-soft: rgba(8, 12, 20, 0.76);
  --color-bg-chip: rgba(11, 18, 31, 0.9);
  --color-bg-accent-active: rgba(8, 27, 24, 0.96);

  --color-text-primary: #d1d9e6;
  --color-text-secondary: #c7d2e1;
  --color-text-muted: #4b5a72;
  --color-text-muted-soft: #8fa3bf;
  --color-text-faint: rgba(199, 210, 225, 0.54);
  --color-text-fainter: rgba(199, 210, 225, 0.38);
  --color-text-inverse: #ffffff;
  --color-text-brand-hover: #33e899;

  --color-brand-primary: #00d97e;
  --color-brand-primary-soft: rgba(0, 217, 126, 0.24);
  --color-brand-secondary: #b7c1cd;
  --color-brand-cool: #b7c1cd;
  --color-warn: #f59e0b;
  --color-danger: #f43f5e;

  --color-border-default: #1c2a3d;
  --color-border-cool-soft: rgba(199, 210, 225, 0.12);
  --color-border-cool-mid: rgba(199, 210, 225, 0.16);
  --color-border-cool-strong: rgba(199, 210, 225, 0.28);
  --color-border-brand-strong: rgba(0, 217, 126, 0.55);
  --color-border-brand-active: rgba(0, 217, 126, 0.62);

  --shadow-soft: 0 4px 20px rgba(0, 0, 0, 0.5);
  --shadow-float: 0 12px 32px rgba(0, 0, 0, 0.34);

  --radius-none: 0;
  --radius-sm: 4px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-xl: 18px;
  --radius-pill: 999px;

  --space-1: 4px;
  --space-2: 6px;
  --space-3: 8px;
  --space-4: 10px;
  --space-5: 12px;
  --space-6: 14px;
  --space-7: 16px;
  --space-8: 20px;
  --space-10: 24px;

  --ticker-font-family: var(--font-family-mono);
  --ticker-font-size: var(--font-size-sm);
  --ticker-font-weight: var(--font-weight-regular);
  --ticker-letter-spacing: 0.08em;
  --ticker-city-color: var(--color-text-muted-soft);
  --ticker-clock-color: var(--color-text-secondary);
  --ticker-schedule-color: var(--color-text-fainter);
  --ticker-countdown-color: var(--color-text-inverse);
  --ticker-message-color: var(--primary);
  --ticker-separator-color: rgba(199, 210, 225, 0.3);
  --ticker-bar-border-color: rgba(199, 210, 225, 0.12);
  --ticker-bar-background:
    linear-gradient(90deg, rgba(0, 217, 126, 0.08) 0%, rgba(199, 210, 225, 0.05) 45%, rgba(8, 12, 20, 0.98) 100%),
    var(--color-bg-deep);

  --header-bg: var(--color-bg-overlay);
  --header-brand-subtitle-font-family: var(--font-family-mono);
  --header-brand-subtitle-font-size: var(--font-size-sm);
  --header-brand-subtitle-font-weight: var(--font-weight-regular);
  --header-brand-subtitle-letter-spacing: 0.08em;
  --header-brand-hover-color: var(--color-text-brand-hover);
  --header-next-scrape-font-family: var(--font-family-mono);
  --header-next-scrape-font-size: var(--font-size-sm);
  --header-next-scrape-letter-spacing: 0.06em;

  --city-clock-button-border: var(--color-border-cool-soft);
  --city-clock-button-background:
    linear-gradient(180deg, rgba(23, 27, 34, 0.96) 0%, rgba(14, 18, 24, 0.96) 100%),
    rgba(8, 12, 20, 0.9);
  --city-clock-button-text: var(--color-text-muted-soft);
  --city-clock-button-hover-border: var(--color-border-cool-strong);
  --city-clock-button-hover-text: var(--color-text-inverse);
  --city-clock-button-active-border: rgba(0, 217, 126, 0.62);
  --city-clock-button-active-background:
    linear-gradient(180deg, rgba(9, 25, 24, 0.96) 0%, rgba(8, 20, 18, 0.96) 100%),
    rgba(5, 10, 16, 0.96);
  --city-clock-button-active-text: var(--color-text-inverse);
  --city-clock-countdown-bg: rgba(8, 12, 20, 0.76);
  --city-clock-countdown-border: rgba(0, 217, 126, 0.24);
  --city-clock-countdown-text: rgba(231, 255, 244, 0.92);
  --city-clock-time-text: var(--color-text-inverse);
  --city-clock-detail-text: var(--color-text-faint);

  --player-bg: #000000;
  --player-backdrop-surface: rgba(17, 24, 39, 0.88);
  --player-back-btn-bg: rgba(0, 0, 0, 0.72);
  --player-back-btn-border: rgba(255, 255, 255, 0.12);
  --player-back-btn-text: var(--color-text-inverse);
  --player-footer-background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.86) 32%, rgba(0, 0, 0, 0.94) 100%);
  --player-ui-border: rgba(255, 255, 255, 0.08);
  --player-ui-text: rgba(255, 255, 255, 0.72);
  --player-ui-text-muted: rgba(255, 255, 255, 0.62);
  --player-ui-text-dim: rgba(255, 255, 255, 0.54);
  --player-range-mark-bg: transparent;
  --player-range-mark-text: var(--color-text-inverse);
  --player-cell-bg: var(--color-bg-grid);
  --player-cell-border: rgba(255, 255, 255, 0.06);
  --player-rank-bg: #000000;
  --player-rank-border: rgba(255, 255, 255, 0.92);
  --player-rank-text: var(--color-text-inverse);
  --player-flight-line-color: rgba(255, 255, 255, 0.96);
  --player-motion-label-bg: rgba(0, 0, 0, 0.72);
  --player-motion-label-text: var(--color-text-inverse);
  --player-title-card-background:
    radial-gradient(circle at 50% 18%, rgba(255, 255, 255, 0.07), transparent 62%),
    linear-gradient(180deg, rgba(247, 240, 225, 0.08) 0%, rgba(10, 17, 32, 0.96) 100%);
  --player-title-text: #f5ede0;

  --ui-accent-text: var(--color-text-secondary);
  --ui-chip-bg: var(--color-bg-surface-chip);
  --ui-input-bg: var(--color-bg-surface-input);
  --ui-table-bg: var(--color-bg-surface-table);
  --ui-gap-bg: var(--color-bg-surface-gap);
  --ui-tooltip-bg: var(--color-bg-surface-tooltip);
  --ui-pill-bg: var(--color-bg-panel);
  --heatmap-empty-bg: #161b22;
  --heatmap-low-bg: #1b2a20;
  --heatmap-mid-bg: #1c3a2a;
  --heatmap-good-bg: #157346;
  --heatmap-border: #202933;

  --button-padding-y-sm: var(--space-2);
  --button-padding-x-sm: var(--space-4);
  --button-padding-y-md: var(--space-3);
  --button-padding-x-md: var(--space-5);
  --button-gap-sm: var(--space-2);
  --button-min-height-sm: 30px;
  --button-min-height-md: 34px;

  --thumb-size: 120px;
  --cell-width: calc(var(--thumb-size) + 20px);
  --gap-column-width: 72px;
  --player-side-rail-width: 36px;
  --player-side-rail-total: 100px;

  --bg: var(--color-bg-page);
  --panel: var(--color-bg-panel);
  --panel-alt: var(--color-bg-panel-alt);
  --text: var(--color-text-primary);
  --muted: var(--color-text-muted);
  --border: var(--color-border-default);
  --primary: var(--color-brand-primary);
  --primary-2: var(--color-brand-secondary);
  --cool: var(--color-brand-cool);
  --good: var(--color-brand-primary);
  --warn: var(--color-warn);
  --danger: var(--color-danger);
  --shadow: var(--shadow-soft);
  --radius: var(--radius-md);
}