/* ── Theme Variables ──────────────────────────────────────── */

:root,
[data-theme="sunset"] {
  /* Backgrounds */
  --bg:            #FEFCF3;
  --bg-surface:    #ffffff;
  --bg-subtle:     #f8f6ee;
  --bg-inset:      #f0ede4;
  --bg-emphasis:   #222222;

  /* Foregrounds */
  --fg:            #222222;
  --fg-inv:        #FEFCF3;
  --fg-2:          #555555;
  --fg-3:          #888888;
  --fg-4:          #333;

  /* Borders */
  --border:        #222222;
  --border-2:      #cccccc;
  --border-3:      #dddddd;
  --border-4:      #eeeeee;
  --border-warm:   #e8e4d8;

  /* Latest METAR highlight — steel fog, neutral "current" marker */
  --latest-bg:     #e5eaee;
  --latest-border: #c5cdd5;

  /* Status */
  --green-bg:      #d4edda;
  --green-fg:      #155724;
  --green-border:  #b8dfc3;
  --yellow-bg:     #fff3cd;
  --yellow-bg-lt:  #fff8e0;
  --yellow-fg:     #664d03;
  --yellow-accent: #FFDC00;
  --red-bg:        #f8d7da;
  --red-fg:        #721c24;
  --red-border:    #f5c6cb;
  --orange-bg:     #fdf0eb;
  --na-bg:         #e9ecef;
  --na-fg:         #999999;

  /* Accents */
  --amber:          #b58900;
  --amber-dark:     #9a7400;
  --amber-text:     #7a6000;
  --sigmet-fg:      #cb4b16;
  --err-fg:         #c00;
  --danger-border:  #a94442;
  --caution-border: #8a6d3b;
  --caution-text:   #856404;

  /* Shape — single toggle for all border-radius in the app */
  --radius: 5px;

  /* Hover backgrounds (nav tabs, icon buttons) */
  --hover-bg: rgba(0,0,0,0.06);
  --accent-subtle: rgba(0,0,0,0.08);

  /* Overlays & shadows */
  --overlay:        rgba(0,0,0,0.3);
  --shadow-sm:      0 2px 8px rgba(0,0,0,0.25);
  --shadow-md:      0 6px 24px rgba(0,0,0,0.09);

  /* Progress bar */
  --progress-track: #333333;
  --progress-fill:  #FEFCF3;

  /* Home background image overlay */
  --home-bg-fade-mid: rgba(254,252,243,0.05);
}

[data-theme="day"] {
  --bg:            #ffffff;
  --bg-surface:    #f7f7f5;
  --bg-subtle:     #eeeeeb;
  --bg-inset:      #e6e4e0;
  --bg-emphasis:   #111111;

  --fg:            #111111;
  --fg-inv:        #f7f7f5;
  --fg-2:          #444444;
  --fg-3:          #777777;
  --fg-4:          #333;

  --border:        #111111;
  --border-2:      #cccccc;
  --border-3:      #dddddd;
  --border-4:      #eeeeee;
  --border-warm:   #d8d8d4;

  --progress-track: #333333;
  --progress-fill:  #f7f7f5;

  --hover-bg: rgba(0,0,0,0.06);
  --accent-subtle: rgba(0,0,0,0.08);

  /* Home background image overlay */
  --home-bg-fade-mid: rgba(255,255,255,0.18);
}

[data-theme="dark"] {
  --bg:            #1a1a18;
  --bg-surface:    #232320;
  --bg-subtle:     #2c2c28;
  --bg-inset:      #363632;
  --bg-emphasis:   #2c2c28;

  --fg:            #e8e6de;
  --fg-inv:        #e8e6de;
  --fg-2:          #a8a6a0;
  --fg-3:          #706e68;
  --fg-4:          #ddd;

  --border:        #e8e6de;
  --border-2:      #3a3a36;
  --border-3:      #2e2e2a;
  --border-4:      #262622;
  --border-warm:   #3a3a36;

  --latest-bg:     #1f2b38;
  --latest-border: #2d3e52;

  --green-bg:      #1a3325;
  --green-fg:      #6fcf97;
  --green-border:  #2a5040;
  --yellow-bg:     #2e2500;
  --yellow-bg-lt:  #2a2100;
  --yellow-fg:     #f4c842;
  --yellow-accent: #FFDC00;
  --red-bg:        #2e0f12;
  --red-fg:        #f47c7c;
  --red-border:    #5a1a1a;
  --orange-bg:     #2e1808;
  --na-bg:         #282826;
  --na-fg:         #666660;

  --amber:          #d4a017;
  --amber-dark:     #b88a10;
  --amber-text:     #d4a017;
  --sigmet-fg:      #e06030;
  --err-fg:         #f47c7c;
  --danger-border:  #c04040;
  --caution-border: #c49a3a;
  --caution-text:   #c49a3a;

  --overlay:        rgba(0,0,0,0.6);
  --shadow-sm:      0 2px 8px rgba(0,0,0,0.5);
  --shadow-md:      0 6px 24px rgba(0,0,0,0.4);

  --progress-track: #3a3a36;
  --progress-fill:  #e8e6de;

  --hover-bg: rgba(255,255,255,0.08);
  --accent-subtle: rgba(255,255,255,0.12);

  /* Home background image overlay */
  --home-bg-fade-mid: rgba(26,26,24,0.50);
}