/* ============================================================
   temperatura_sp — Design tokens v2
   Drop-in replacement for the :root / [data-bs-theme] blocks
   in dash/assets/styles.css. Plotly + dash_table both read these
   via CSS variables (see plotly_theme.js + tables.py).
   ============================================================ */

:root, [data-bs-theme="dark"] {
  /* ---- surfaces (5 levels of elevation, not 3) ----
     The original had bg / bg-elevated / card. Adding `well` (sunken
     groups inside cards) and `popover` (menus, tooltips) so we can
     stop mixing rgba(15,19,28,0.35) inline. */
  --bg:           #07090f;
  --bg-elevated:  #0c1019;
  --well:         #0a0e17;          /* sunken panel inside a card */
  --card:         #11151f;
  --card-hover:   #161b28;
  --popover:      #1a1f2d;          /* menus, tooltips, modals */

  /* borders — soft for dividers, hard for outlines */
  --border:       #232a3c;
  --border-soft:  #1a2030;
  --border-hairline: rgba(255,255,255,0.04);   /* 1px top-inset highlight */

  /* ---- text ramp (5 stops) ----
     Original had text / text-dim / muted. Adding `quiet` (axis ticks,
     timestamps) and `strong` (KPI numbers) so hierarchy is intentional. */
  --text-strong: #ffffff;
  --text:        #e6e9f2;
  --text-dim:    #aeb4c6;
  --quiet:       #7c8299;
  --muted:       #5a6076;

  /* ---- accent (rebuilt from a single hue → ramp) ----
     Default is the original blue. Tweaks can swap the hue at runtime. */
  --accent-h:    228;
  --accent-s:    100%;
  --accent:      hsl(var(--accent-h) var(--accent-s) 70%);
  --accent-2:    hsl(calc(var(--accent-h) + 30) var(--accent-s) 72%);
  --accent-fg:   #0a0d13;
  --accent-soft: hsl(var(--accent-h) var(--accent-s) 70% / 0.10);
  --accent-mid:  hsl(var(--accent-h) var(--accent-s) 70% / 0.18);
  --accent-edge: hsl(var(--accent-h) var(--accent-s) 70% / 0.45);
  --accent-glow: hsl(var(--accent-h) var(--accent-s) 70% / 0.30);

  /* ---- semantic status (5 stops + bg+fg+border for each) ----
     Stop hardcoding rgba(34,197,94,0.10) inline. */
  --ok:        #22c55e;     --ok-bg:   rgba(34,197,94,0.10);    --ok-edge:   rgba(34,197,94,0.30);
  --warn:      #eab308;     --warn-bg: rgba(234,179,8,0.10);    --warn-edge: rgba(234,179,8,0.30);
  --danger:    #ef4444;     --danger-bg: rgba(239,68,68,0.10);  --danger-edge: rgba(239,68,68,0.30);
  --info:      #38bdf8;     --info-bg: rgba(56,189,248,0.10);   --info-edge: rgba(56,189,248,0.30);
  --neutral:   #6f7489;     --neutral-bg: rgba(111,116,137,0.10); --neutral-edge: rgba(111,116,137,0.25);

  /* ---- model series (cores fixas, batem com SERIES_COLORS em
     dash/components/plotly_theme.py). Cada NWP com 12z tem `_alt`
     escurecido pra diferenciar visualmente o ciclo. */
  --series-wu:           #34d399;   /* observed — verde vibrante */
  --series-metar:        #f59e0b;   /* observed alt — laranja */
  --series-eta08:        #7c9cff;   --series-eta08-alt:  #4f6bc4;
  --series-eta40:        #fcd34d;
  --series-ecmwf:        #38bdf8;   --series-ecmwf-alt:  #0ea5e9;
  --series-gfs:          #ef4444;   --series-gfs-alt:    #b91c1c;
  --series-gefs:         #a78bfa;   --series-gefs-alt:   #7957c8;
  --series-wrf:          #fb923c;
  --series-xgb:          #a78bfa;   /* ML stack */
  --series-ridge:        #2dd4bf;
  --series-prophet:      #fb923c;
  --series-chronos:      #f472b6;
  --series-tft:          #facc15;

  /* ---- plot ---- */
  --plot-paper:       transparent;
  --plot-plot:        transparent;
  --plot-grid:        rgba(255,255,255,0.05);
  --plot-grid-strong: rgba(255,255,255,0.10);
  --plot-axis:        rgba(255,255,255,0.10);
  --plot-tick:        var(--quiet);
  --plot-font:        var(--text-dim);
  --plot-hover-bg:    var(--popover);
  --plot-hover-border: var(--border);

  /* ---- type scale (modular, 1.125 ratio from 13px base) ---- */
  --fs-xs:    11px;
  --fs-sm:    12.5px;
  --fs-base:  13px;
  --fs-md:    14.5px;
  --fs-lg:    17px;
  --fs-xl:    21px;
  --fs-2xl:   28px;
  --fs-3xl:   36px;
  --fs-display: 44px;

  --lh-tight:   1.15;
  --lh-snug:    1.35;
  --lh-normal:  1.55;

  /* ---- spacing (4px grid) ---- */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-7: 32px;
  --sp-8: 40px;
  --sp-9: 56px;

  /* ---- radii ---- */
  --r-xs:   3px;
  --r-sm:   4px;
  --r-md:   6px;
  --r-lg:   7px;
  --r-xl:   9px;
  --r-2xl:  12px;
  --r-pill: 999px;

  /* ---- shadows (5 levels, more dimensional than the original 1) ---- */
  --shadow-1:
    0 1px 0 rgba(255,255,255,0.04) inset,
    0 1px 2px rgba(0,0,0,0.4);
  --shadow-2:
    0 1px 0 rgba(255,255,255,0.04) inset,
    0 4px 14px rgba(0,0,0,0.35);
  --shadow-3:
    0 1px 0 rgba(255,255,255,0.05) inset,
    0 12px 32px rgba(0,0,0,0.45);
  --shadow-glow:
    0 0 0 1px var(--accent-edge),
    0 0 24px var(--accent-glow);
  --shadow-focus:
    0 0 0 3px var(--accent-glow);

  /* ---- motion ---- */
  --ease:           cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out:       cubic-bezier(0.16, 1, 0.3, 1);
  --t-fast:         120ms;
  --t-base:         180ms;
  --t-slow:         320ms;

  /* ---- density (toggleable via Tweaks) ---- */
  --density-pad:    var(--sp-4);    /* card body padding */
  --density-row:    36px;           /* table row height */
  --density-gap:    var(--sp-4);
}

/* ============================================================
   LIGHT — built parallel, not as inverted dark.
   Cards float on a soft warm-tinted bg so they feel intentional.
   ============================================================ */
[data-bs-theme="light"] {
  --bg:           #f7f8fb;
  --bg-elevated:  #ffffff;
  --well:         #f1f3f8;
  --card:         #ffffff;
  --card-hover:   #fafbfd;
  --popover:      #ffffff;

  --border:       #d8dde8;
  --border-soft:  #e7eaf1;
  --border-hairline: rgba(0,0,0,0.02);

  --text-strong: #0a0d18;
  --text:        #1a1f2e;
  --text-dim:    #4a5168;
  --quiet:       #6f7590;
  --muted:       #8a90a5;

  --accent-h:    232;
  --accent-s:    95%;
  --accent:      hsl(var(--accent-h) var(--accent-s) 58%);
  --accent-2:    hsl(calc(var(--accent-h) + 24) var(--accent-s) 60%);
  --accent-fg:   #ffffff;
  --accent-soft: hsl(var(--accent-h) var(--accent-s) 58% / 0.08);
  --accent-mid:  hsl(var(--accent-h) var(--accent-s) 58% / 0.14);
  --accent-edge: hsl(var(--accent-h) var(--accent-s) 58% / 0.40);
  --accent-glow: hsl(var(--accent-h) var(--accent-s) 58% / 0.18);

  --ok:        #15803d;     --ok-bg:   rgba(34,197,94,0.10);    --ok-edge:   rgba(21,128,61,0.30);
  --warn:      #b45309;     --warn-bg: rgba(234,179,8,0.14);    --warn-edge: rgba(180,83,9,0.30);
  --danger:    #b91c1c;     --danger-bg: rgba(239,68,68,0.10);  --danger-edge: rgba(185,28,28,0.30);
  --info:      #0369a1;     --info-bg: rgba(56,189,248,0.10);   --info-edge: rgba(3,105,161,0.30);
  --neutral:   #6f7590;     --neutral-bg: rgba(0,0,0,0.04);     --neutral-edge: rgba(0,0,0,0.10);

  /* Series no tema claro: mesmas hues, L deslocado pra contraste em fundo
     branco. Cada NWP com 12z tem `_alt` ainda mais escuro. */
  --series-wu:           #059669;
  --series-metar:        #d97706;
  --series-eta08:        #2563eb;   --series-eta08-alt:  #1e3a8a;
  --series-eta40:        #b45309;
  --series-ecmwf:        #0891b2;   --series-ecmwf-alt:  #0e7490;
  --series-gfs:          #dc2626;   --series-gfs-alt:    #9f1239;
  --series-gefs:         #7c3aed;   --series-gefs-alt:   #5b21b6;
  --series-wrf:          #ea580c;
  --series-xgb:          #7c3aed;
  --series-ridge:        #0d9488;
  --series-prophet:      #ea580c;
  --series-chronos:      #db2777;
  --series-tft:          #ca8a04;

  --plot-grid:        rgba(0,0,0,0.05);
  --plot-grid-strong: rgba(0,0,0,0.10);
  --plot-axis:        rgba(0,0,0,0.12);
  --plot-tick:        var(--quiet);
  --plot-font:        var(--text);
  --plot-hover-bg:    #ffffff;
  --plot-hover-border: var(--border);

  --shadow-1:
    0 1px 2px rgba(15,23,42,0.04),
    0 1px 0 rgba(15,23,42,0.02);
  --shadow-2:
    0 1px 2px rgba(15,23,42,0.04),
    0 4px 12px rgba(15,23,42,0.06);
  --shadow-3:
    0 4px 8px rgba(15,23,42,0.06),
    0 16px 40px rgba(15,23,42,0.10);
}

/* ============================================================
   ACCENT VARIANTS — exposed as Tweaks. Just override the H/S vars.
   ============================================================ */
[data-accent="cyan"] {
  --accent-h: 188;
  --accent-s: 95%;
  --series-wu: #34d399;
}
[data-accent="amber"] {
  --accent-h: 38;
  --accent-s: 92%;
}
[data-accent="violet"] {
  --accent-h: 262;
  --accent-s: 90%;
}
[data-accent="green"] {
  --accent-h: 152;
  --accent-s: 70%;
}

/* ============================================================
   DENSITY — exposed as Tweaks
   ============================================================ */
[data-density="compact"] {
  --density-pad: var(--sp-3);
  --density-row: 30px;
  --density-gap: var(--sp-3);
  --fs-base: 12.5px;
}
[data-density="cozy"] {
  --density-pad: var(--sp-4);
  --density-row: 36px;
  --density-gap: var(--sp-4);
}
[data-density="spacious"] {
  --density-pad: var(--sp-5);
  --density-row: 44px;
  --density-gap: var(--sp-5);
  --fs-base: 13.5px;
}

/* ============================================================
   CARD STYLE — flat / elevated / outlined
   ============================================================ */
[data-card-style="flat"] {
  --card-shadow: none;
  --card-border: var(--border-soft);
}
[data-card-style="elevated"] {
  --card-shadow: var(--shadow-2);
  --card-border: transparent;
}
[data-card-style="outlined"] {
  --card-shadow: none;
  --card-border: var(--border);
}