/* Design tokens.
   Neutral, low-chroma surfaces with a single accent colour, in the spirit of a
   cloud provider console. Colour is reserved for data, not decoration. */

:root {
  /* Surfaces */
  --surface-page: #f1f3f4;
  --surface-card: #ffffff;
  --surface-raised: #ffffff;
  --surface-sunken: #f8f9fa;
  --surface-hover: #f1f3f4;
  --surface-active: #e8f0fe;

  /* Lines */
  --border: #dadce0;
  --border-strong: #bdc1c6;
  --border-subtle: #e8eaed;

  /* Text */
  --text: #202124;
  --text-secondary: #5f6368;
  --text-muted: #80868b;
  --text-inverse: #ffffff;
  --text-accent: #1a73e8;

  /* Accent */
  --accent: #1a73e8;
  --accent-hover: #1765cc;
  --accent-subtle: #e8f0fe;
  --focus-ring: #1a73e8;

  /* Status */
  --danger: #d93025;
  --danger-subtle: #fce8e6;
  --warn: #ea8600;
  --warn-subtle: #fef7e0;
  --ok: #188038;
  --ok-subtle: #e6f4ea;

  /* Price band scale. Diverging, ordered cheap -> expensive.
     Negative gets its own hue plus a stripe pattern so it never relies on colour alone. */
  --band-negative: #0b5d8f;
  --band-negative-text: #ffffff;
  --band-very-cheap: #188038;
  --band-very-cheap-text: #ffffff;
  --band-cheap: #a8dab5;
  --band-cheap-text: #10331d;
  --band-average: #e3e6e8;
  --band-average-text: #202124;
  --band-expensive: #f6b026;
  --band-expensive-text: #3d2b00;
  --band-very-expensive: #c5221f;
  --band-very-expensive-text: #ffffff;

  /* Chart */
  --chart-line: #1a73e8;
  --chart-area-top: rgba(26, 115, 232, 0.20);
  --chart-area-bottom: rgba(26, 115, 232, 0.02);
  --chart-grid: #e8eaed;
  --chart-axis: #bdc1c6;
  --chart-axis-text: #5f6368;
  --chart-zero: #9aa0a6;
  --chart-now: #d93025;

  /* Cheapest slot on the timeline — a colour outside the band scale, so it
     cannot be mistaken for "very cheap" or "expensive". */
  --cheapest: #0b6e4f;
  --cheapest-text: #ffffff;
  --cheapest-star: #ffe082;

  /* Typography */
  --font-sans: "Inter", "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --font-mono: "Roboto Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  --fs-11: 0.6875rem;
  --fs-12: 0.75rem;
  --fs-13: 0.8125rem;
  --fs-14: 0.875rem;
  --fs-16: 1rem;
  --fs-18: 1.125rem;
  --fs-22: 1.375rem;
  --fs-28: 1.75rem;

  /* Space */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-8: 32px;

  /* Radius — restrained, 4/8px only */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-pill: 999px;

  /* Elevation — barely-there shadows */
  --shadow-card: 0 1px 2px 0 rgba(60, 64, 67, 0.08);
  --shadow-pop: 0 2px 6px 2px rgba(60, 64, 67, 0.15);

  /* Metrics */
  --topbar-h: 48px;
  --sidenav-w: 232px;
  --sidenav-w-collapsed: 56px;
  --timeline-min-w: 940px;
}