/* ============================================================
   Senzorvzduchu Design System — Colors & Type
   ============================================================ */

/* --- Fonts --------------------------------------------------
   Familjen Grotesk is loaded locally from uploaded brand files
   (fonts/*.ttf). Inter is fetched from Google Fonts — swap in
   a local version if you need full offline support.
   ----------------------------------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

/* Variable fonts cover the full 400–700 weight range in two files */
@font-face {
  font-family: 'Familjen Grotesk';
  src: url('fonts/FamiljenGrotesk-VariableFont_wght.ttf') format('truetype-variations'),
       url('fonts/FamiljenGrotesk-VariableFont_wght.ttf') format('truetype');
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Familjen Grotesk';
  src: url('fonts/FamiljenGrotesk-Italic-VariableFont_wght.ttf') format('truetype-variations'),
       url('fonts/FamiljenGrotesk-Italic-VariableFont_wght.ttf') format('truetype');
  font-weight: 400 700;
  font-style: italic;
  font-display: swap;
}

:root {
  /* ---------------------------------------------------------
     BRAND PALETTE
     Primary is a deep, slightly violet royal blue — the voice
     of the brand. Coral is the counterpoint accent, used
     sparingly for warmth and CTA emphasis.
     --------------------------------------------------------- */

  /* Blues — from darkest to lightest */
  --brand-blue-900: #21275F;  /* primary — logo, headings, core UI */
  --brand-blue-800: #3B45A6;  /* secondary, hover dark */
  --brand-blue-700: #4553D5;  /* MAIN ACCENT — buttons, links */
  --brand-blue-600: #5E6ADB;  /* hover / lighter */
  --brand-blue-500: #8993E8;  /* borders, subtle highlights */
  --brand-blue-100: #E6E8F9;  /* soft tint backgrounds */

  /* Coral — warm accent, secondary CTA */
  --brand-coral-700: #FF716A;
  --brand-coral-600: #FF837D;   /* main coral */
  --brand-coral-500: #FF9D99;
  --brand-coral-300: #FFC9C6;   /* soft tint */

  /* Neutrals */
  --neutral-900: #222222;
  --neutral-700: #5D5F62;
  --neutral-500: #A9AEB8;
  --neutral-400: #C9CDD4;
  --neutral-200: #F2F3F5;
  --neutral-000: #FFFFFF;

  /* ---------------------------------------------------------
     AQI SCALE (from map codebase; US EPA PM2.5 categories)
     --------------------------------------------------------- */
  --aqi-good: #87C159;           /* 0 – 12.0     Dobrá */
  --aqi-moderate: #F4D35E;       /* 12.1 – 35.4  Střední */
  --aqi-sensitive: #F48C42;      /* 35.5 – 55.4  Zhoršená */
  --aqi-unhealthy: #E64A45;      /* 55.5 – 150.4 Nezdravá */
  --aqi-very-unhealthy: #8C6AB6; /* 150.5 – 250.4 Velmi nezdravá */
  --aqi-hazardous: #7D5963;      /* 250.5+       Nebezpečná */
  --aqi-no-data: #9CA3AF;

  /* ---------------------------------------------------------
     SEMANTIC TOKENS
     --------------------------------------------------------- */
  --bg: var(--neutral-000);
  --bg-muted: var(--neutral-200);
  --bg-brand-soft: var(--brand-blue-100);
  --fg: var(--neutral-900);
  --fg-muted: var(--neutral-700);
  --fg-soft: var(--neutral-500);
  --fg-on-brand: var(--neutral-000);
  --border: var(--neutral-400);
  --border-soft: var(--neutral-200);
  --border-brand: var(--brand-blue-500);
  --accent: var(--brand-blue-700);
  --accent-hover: var(--brand-blue-800);
  --accent-soft: var(--brand-blue-600);
  --warn: var(--brand-coral-600);
  --warn-hover: var(--brand-coral-700);

  /* ---------------------------------------------------------
     TYPE SYSTEM
     Display / headings: Familjen Grotesk (geometric grotesk,
     humanist, friendly). Body: Inter.
     --------------------------------------------------------- */
  --font-display: 'Familjen Grotesk', 'Inter', system-ui, sans-serif;
  --font-body: 'Inter', system-ui, sans-serif;
  --font-mono: 'SF Mono', 'Menlo', 'Consolas', monospace;

  --fs-display-1: clamp(56px, 8vw, 112px);  /* hero / logotype scale */
  --fs-display-2: clamp(40px, 5vw, 64px);
  --fs-h1: 40px;
  --fs-h2: 32px;
  --fs-h3: 24px;
  --fs-h4: 20px;
  --fs-body-lg: 18px;
  --fs-body: 16px;
  --fs-body-sm: 14px;
  --fs-caption: 12px;
  --fs-overline: 10px;

  --lh-tight: 1.05;
  --lh-snug: 1.2;
  --lh-normal: 1.5;

  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  /* ---------------------------------------------------------
     SPACING / RADIUS / SHADOW
     --------------------------------------------------------- */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;
  --sp-8: 64px;
  --sp-9: 96px;

  --radius-sm: 8px;       /* color chips, small tiles */
  --radius-md: 12px;      /* cards */
  --radius-lg: 16px;
  --radius-pill: 999px;   /* buttons, inputs */

  --shadow-sm: 0 1px 2px rgba(33, 39, 95, 0.06), 0 1px 3px rgba(33, 39, 95, 0.04);
  --shadow-md: 0 2px 10px rgba(0, 0, 0, 0.10);
  --shadow-lg: 0 12px 40px rgba(33, 39, 95, 0.18);
  --shadow-accent: 0 8px 24px rgba(69, 83, 213, 0.35);

  --dur-fast: 120ms;
  --dur-med: 200ms;
  --ease-out: cubic-bezier(0.2, 0.7, 0.2, 1);
}

/* ---------------------------------------------------------
   SEMANTIC TYPE CLASSES
   --------------------------------------------------------- */
.display-1 { font-family: var(--font-display); font-weight: var(--fw-bold); font-size: var(--fs-display-1); line-height: var(--lh-tight); letter-spacing: -0.02em; color: var(--brand-blue-700); }
.display-2 { font-family: var(--font-display); font-weight: var(--fw-bold); font-size: var(--fs-display-2); line-height: var(--lh-tight); letter-spacing: -0.015em; color: var(--brand-blue-900); }
h1, .h1 { font-family: var(--font-display); font-weight: var(--fw-bold); font-size: var(--fs-h1); line-height: var(--lh-tight); letter-spacing: -0.01em; color: var(--brand-blue-900); }
h2, .h2 { font-family: var(--font-display); font-weight: var(--fw-semibold); font-size: var(--fs-h2); line-height: var(--lh-snug); color: var(--brand-blue-900); }
h3, .h3 { font-family: var(--font-display); font-weight: var(--fw-semibold); font-size: var(--fs-h3); line-height: var(--lh-snug); color: var(--brand-blue-900); }
h4, .h4 { font-family: var(--font-display); font-weight: var(--fw-semibold); font-size: var(--fs-h4); line-height: var(--lh-snug); color: var(--brand-blue-900); }
p, .body { font-family: var(--font-body); font-weight: var(--fw-regular); font-size: var(--fs-body); line-height: var(--lh-normal); color: var(--fg); }
.body-sm { font-family: var(--font-body); font-weight: var(--fw-regular); font-size: var(--fs-body-sm); line-height: var(--lh-normal); color: var(--fg-muted); }
.caption { font-family: var(--font-body); font-size: var(--fs-caption); color: var(--fg-soft); }
.overline { font-family: var(--font-body); font-size: var(--fs-overline); text-transform: uppercase; letter-spacing: 0.08em; color: var(--fg-soft); font-weight: var(--fw-semibold); }
code, .code { font-family: var(--font-mono); font-size: 0.92em; background: var(--neutral-200); padding: 2px 6px; border-radius: 4px; }

a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-hover); text-decoration: underline; }