/* ==========================================================================
   THE DAILY SERVE - design tokens
   This is the only stylesheet that should contain raw color values.
   ========================================================================== */

:root {
  /* surfaces */
  --c-canvas: #00205B;
  --c-rail: #001A4E;
  --c-surface: #0A2E6B;
  --c-surface-hover: var(--c-surface);
  --c-surface-icon: var(--c-canvas);
  --c-surface-ink: #121323;

  /* brand and status */
  --c-brand: #FFD400;
  --c-brand-ink: var(--c-canvas);
  --c-positive: #10B981;
  --c-negative: #e5674f;

  /* text */
  --c-text: #fff;
  --c-text-muted: #94A3B8;
  --c-text-dim: #6D7278;

  /* borders and effects */
  --c-divider: #2b2a39;
  --c-hairline: #1E3A8A;
  --c-border-strong: #f6f2dc;
  --c-border-neutral: #dadada;
  --c-border-soft: rgb(255 255 255 / 18%);
  --c-border-subtle: rgb(255 255 255 / 12%);
  --c-border-faint: rgb(255 255 255 / 8%);
  --c-disabled: rgb(255 255 255 / 10%);
  --shadow-panel: 0 18px 45px rgb(0 20 60 / 30%);

  /* data visualization */
  --c-data-positive: #CFFF05;
  --c-aqi-track: var(--c-text-muted);
  --c-aqi-good: #99cccd;
  --c-accent-now: var(--c-brand);
  --c-accent-next: var(--c-text);

  /* typography */
  --font-sans: roboto, roboto-fallback, sans-serif;
  --font-heading: roboto-condensed, roboto-condensed-fallback, sans-serif;
  --fs-display: 2.25rem;
  --fs-temp: 2.125rem;
  --fs-page: 1.625rem;
  --fs-stat: 2rem;
  --fs-content: 1rem;
  --fs-section: 0.875rem;
  --fs-body: 0.8125rem;
  --fs-label: 0.75rem;
  --fs-meta: 0.6875rem;
  --fs-micro: 0.625rem;
  --ls-section: 0.06em;

  /* spacing (4px base) */
  --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;

  /* shape */
  --r-xs: 4px;
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 14px;
  --r-xl: 16px;
  --r-2xl: 18px;
  --r-pill: 999px;

  /* layout */
  --content-max-width: 1200px;
  --rail-w: 240px;
  --tabbar-h: 65px;
  --mobile-header-h: 62px;
  --gutter: var(--s-6);
  --gutter-desktop: var(--s-8);

  /* application aliases */
  --background-color: var(--c-canvas);
  --light-color: var(--c-surface);
  --dark-color: var(--c-rail);
  --text-color: var(--c-text);
  --link-color: var(--c-text);
  --link-hover-color: var(--c-brand);
  --body-font-family: var(--font-sans);
  --heading-font-family: var(--font-heading);
  --body-font-size-m: 22px;
  --body-font-size-s: 19px;
  --body-font-size-xs: 17px;
  --heading-font-size-xxl: 32px;
  --heading-font-size-xl: 22px;
  --heading-font-size-l: 20px;
  --heading-font-size-m: 18px;
  --heading-font-size-s: 16px;
  --heading-font-size-xs: 14px;
  --nav-height: var(--tabbar-h);
}

@media (width >= 900px) {
  :root {
    --body-font-size-m: 18px;
    --body-font-size-s: 16px;
    --body-font-size-xs: 14px;
    --heading-font-size-xxl: 28px;
  }
}