/* ===========================================
   DESIGN TOKENS
   =========================================== */

/* Register --header-bg-color as a typed <color> property.
   This lets CSS interpolate its value inside linear-gradient(),
   so header and canvas gradient transition in perfect sync. */
@property --header-bg-color {
  syntax: '<color>';
  inherits: true;
  initial-value: #000000;
}

:root {
  /* -----------------------------------------
     AIR QUALITY (header background)
     ----------------------------------------- */
  --aq-v-bad: #7058E3;      /* Bardzo zły */
  --aq-bad: #F93822;        /* Zły */
  --aq-moderate: #F98122;   /* Dostateczny */
  --aq-sufficient: #F9C822; /* Umiarkowany */
  --aq-good: #3E9F4D;       /* Dobry */
  --aq-v-good: #3E9F97;     /* Bardzo dobry */
  --header-bg-color: #000000;    /* Start black; JS updates, CSS transitions via @property */
  transition: --header-bg-color 0.4s ease;
  --header-text-color: #ffffff; /* Header elements (logo, borders, text) always white */

  --font-primary: 'Oswald', sans-serif;
  --font-secondary: 'Editorial New', 'Times New Roman', Times, serif;
  
  /* -----------------------------------------
     TEMPERATURE (concentric circles)
     Scale: <-25°C to >38°C (Warsaw extremes)
     Non-linear mapping: tanh-based, centered on 10°C
     ----------------------------------------- */
  
  /* Gradient colors (cold → hot) */
  --temp-gradient-0: #001f3f;   /* 0% - extreme cold (-25°C) */
  --temp-gradient-15: #0074D9;  /* 15% - cold */
  --temp-gradient-35: #7FDBFF;  /* 35% - cool */
  --temp-gradient-50: #2ECC40;  /* 50% - mild (10°C center) */
  --temp-gradient-70: #FFDC00;  /* 70% - warm */
  --temp-gradient-85: #FF851B;  /* 85% - hot */
  --temp-gradient-100: #FF4136; /* 100% - extreme hot (+38°C) */
  
  /* Legacy discrete colors (kept for compatibility) */
  --temp-freezing: #001f3f;    /* < -10°C */
  --temp-cold: #0074D9;        /* -10°C to 0°C */
  --temp-cool: #7FDBFF;        /* 0°C to 10°C */
  --temp-mild: #2ECC40;        /* 10°C to 20°C */
  --temp-warm: #FFDC00;        /* 20°C to 30°C */
  --temp-hot: #FF4136;         /* > 30°C */
  
  /* Circle styling */
  --temp-circle-opacity: 0.85;
  --temp-center-glow: #FF0000;
  
  /* -----------------------------------------
     TEMPERATURE RING GEOMETRY (11 rings + center)
     Values in rem, ready for SVG rendering
     Based on specification scaled to canvas
     ----------------------------------------- */
  --temp-ring-count: 11;
  
  /* Center (filled circle) */
  --temp-center-radius: 2.12rem;
  
  /* Ring 1-11: radius (r) and stroke-width */
  --temp-ring-1-radius: 2.90rem;
  --temp-ring-1-stroke: 0.68rem;
  
  --temp-ring-2-radius: 4.03rem;
  --temp-ring-2-stroke: 0.61rem;
  
  --temp-ring-3-radius: 5.19rem;
  --temp-ring-3-stroke: 0.53rem;
  
  --temp-ring-4-radius: 6.35rem;
  --temp-ring-4-stroke: 0.53rem;
  
  --temp-ring-5-radius: 7.49rem;
  --temp-ring-5-stroke: 0.43rem;
  
  --temp-ring-6-radius: 8.63rem;
  --temp-ring-6-stroke: 0.40rem;
  
  --temp-ring-7-radius: 9.79rem;
  --temp-ring-7-stroke: 0.33rem;
  
  --temp-ring-8-radius: 10.94rem;
  --temp-ring-8-stroke: 0.26rem;
  
  --temp-ring-9-radius: 12.08rem;
  --temp-ring-9-stroke: 0.23rem;
  
  --temp-ring-10-radius: 13.23rem;
  --temp-ring-10-stroke: 0.13rem;
  
  --temp-ring-11-radius: 14.40rem;
  --temp-ring-11-stroke: 0.10rem;
  
  /* Mapping parameters (Warsaw):
     - Range: -25°C to +38°C (historic extremes)
     - High sensitivity zone: -5°C to +25°C (typical)
     - Center: 10°C (middle of typical range)
     - 2°C change in typical range = visible color shift */
  
  /* -----------------------------------------
     WATER LEVEL (Vistula river line)
     Fixed height bar, position reflects water level
     Non-linear mapping: tanh-based, centered on typical level
     Gradient: stan rzeki (designer) — dark red → red → magenta → violet → blue
     ----------------------------------------- */
  --water-bar-height: 20px;       /* Fixed bar height */
  --water-color-top: #1B0B0D;     /* Gradient start (dark red-black) */
  --water-color-bottom: #5300FF;   /* Gradient end (electric blue-violet) */
  /* Full 7-stop gradient (stan rzeki) — use when bar shows full spectrum */
  --water-gradient-to-bottom: linear-gradient(
    to bottom,
    #1B0B0D 0%,
    #4F0E10 15%,
    #FF0000 35%,
    #FF0055 50%,
    #FF00AA 60%,
    #AA00FF 75%,
    #5300FF 100%
  );
  --water-gradient-to-top: linear-gradient(
    to top,
    #1B0B0D 0%,
    #4F0E10 15%,
    #FF0000 35%,
    #FF0055 50%,
    #FF00AA 60%,
    #AA00FF 75%,
    #5300FF 100%
  );
  --water-min-position: 10%;      /* Min Y position (extreme low) */
  --water-max-position: 90%;      /* Max Y position (flood level) */
  /* Mapping parameters (Vistula Warsaw):
     - Range: 0-800 cm (record low ~15cm, flood ~800cm)
     - High sensitivity zone: 100-250 cm
     - Center: 175 cm (middle of typical range)
     - 5 cm difference should be clearly visible */
  
  /* -----------------------------------------
     PRECIPITATION (bottom gradients)
     ----------------------------------------- */
  --precip-snow: #FFFFFF;
  --precip-rain: #4169E1;         /* Royal blue */
  --precip-heavy: #8A2BE2;        /* Blue violet for heavy */
  --precip-gradient-end: transparent;
  
  /* -----------------------------------------
     SKY / DAY-NIGHT (column backgrounds)
     ----------------------------------------- */
  --sky-dawn: #87CEEB;            /* Light sky blue */
  --sky-day-clear: #00CED1;       /* Turquoise - clear day */
  --sky-day-cloudy: #B0C4DE;      /* Light steel blue */
  --sky-dusk: #DDA0DD;            /* Plum - sunset tones */
  --sky-dusk-red: #CD5C5C;        /* Indian red - red sunset */
  --sky-night: transparent;        /* Show stripes */
  --sky-overcast: #708090;        /* Slate gray */
  
  /* -----------------------------------------
     STRIPES (base pattern)
     Count is fixed, height scales with canvas
     ----------------------------------------- */
  --stripe-light: #FFFFFF;
  --stripe-dark: #000000;
  --stripe-count: 54;           /* 1080/20=54 single stripes (27 white + 27 black) */
  --stripe-opacity: 1;
  --grid-overlay-opacity: 0.8;  /* Black overlay on grid area */
  
  /* -----------------------------------------
     NEWS LABELS (keywords overlay)
     ----------------------------------------- */
  --news-label-bg: #FF0000;
  --news-label-text: #000000;
  --news-label-font: 'Oswald', sans-serif;
  
  /* -----------------------------------------
     LAYOUT & TIMING
     ----------------------------------------- */
  --header-padding: 0 34px;
  --transition-fast: 0.3s;
  --transition-normal: 0.5s;
  --grid-gap: 2px;
  
  /* -----------------------------------------
     CANVAS (timeline board)
     Fixed 16:9 aspect ratio (Full HD base)
     ----------------------------------------- */
  --canvas-max-width: 1920px;
  --canvas-max-height: 1080px;
  --canvas-aspect-ratio: 16 / 9;
  --canvas-margin: 20px;        /* Left/right margin inside canvas */
  --grid-columns: 24;           /* Hour columns (00:00 - 23:00) */

  /* -----------------------------------------
     ABOUT OVERLAY (redesigned section)
     Frame z Figmy: 1920×9136, scrollowalna warstwa
     nieprzezroczysta nad dziełem.
     ----------------------------------------- */
  --about-bg-dark: #161616;
  --about-bg-light: #eeeeee;
  --about-text-on-dark: #ffffff;
  --about-text-on-light: #000000;
  --about-border-on-dark: #ffffff;
  --about-border-on-light: #000000;

  /* Typografia (skala fluid, base = 1920px viewport) */
  --about-hero: clamp(2.5rem, 5vw, 6rem);          /* 96px @ 1920 */
  --about-people: clamp(8rem, 20.83vw, 25rem);     /* 400px @ 1920 */
  --about-quote: clamp(1.25rem, 1.61vw, 1.94rem);  /* 31px @ 1920 */
  --about-quote-line: 1.35;
  --about-hero-line: 1.146;                        /* 110/96 */
  --about-label: 12px;
  --about-close: 17px;

  /* CLOSE pill (sticky w prawym górnym rogu overlay) */
  --about-close-top: clamp(20px, 2.6vw, 50px);     /* 50px @ 1920 */
  --about-close-right: clamp(20px, 3.23vw, 62px);  /* 62px @ 1920 */
  --about-close-w: clamp(80px, 7.34vw, 141px);     /* 141px @ 1920 */
  --about-close-h: clamp(40px, 3.8vw, 73px);       /* 73px @ 1920 */
}