/*
██╗  ██╗ ██████╗ ██╗     ██╗██████╗  █████╗ ██╗   ██╗  ████████╗██████╗  █████╗  ██████╗██╗  ██╗███████╗██████╗   ██╗  ██╗██╗   ██╗██████╗    
██║  ██║██╔═══██╗██║     ██║██╔══██╗██╔══██╗╚██╗ ██╔╝  ╚══██╔══╝██╔══██╗██╔══██╗██╔════╝██║ ██╔╝██╔════╝██╔══██╗  ██║  ██║██║   ██║██╔══██╗    
███████║██║   ██║██║     ██║██║  ██║███████║ ╚████╔╝      ██║   ██████╔╝███████║██║     █████╔╝ █████╗  ██████╔╝  ███████║██║   ██║██████╔╝      
██╔══██║██║   ██║██║     ██║██║  ██║██╔══██║  ╚██╔╝       ██║   ██╔══██╗██╔══██║██║     ██╔═██╗ ██╔══╝  ██╔══██╗  ██╔══██║██║   ██║██╔══██╗  
██║  ██║╚██████╔╝███████╗██║██████╔╝██║  ██║   ██║        ██║   ██║  ██║██║  ██║╚██████╗██║  ██╗███████╗██║  ██║  ██║  ██║╚██████╔╝██████╔╝    
╚═╝  ╚═╝ ╚═════╝ ╚══════╝╚═╝╚═════╝ ╚═╝  ╚═╝   ╚═╝        ╚═╝   ╚═╝  ╚═╝╚═╝  ╚═╝ ╚═════╝╚═╝  ╚═╝╚══════╝╚═╝  ╚═╝  ╚═╝  ╚═╝ ╚═════╝ ╚═════╝      
(c) 2024-2025 Zak The GoAnimator
*/

/* THEME EDITOR

Welcome to the Theme Editor for Holiday Tracker
Hub!

Here, you can edit the dashboard’s root CSS to 
change colours, fonts, and effects so the tracker 
matches your own style.

If you’re live streaming the tracker, you can use
this custom CSS to give your stream a unique look.
*/

/* TIPS

- Edit variables under :root (for example:
  --main-bg-color, --accent, --text).
- Use valid CSS colour values (hex, rgb(), hsl(),
  or colour names).
- Keep contrast high so the map and widgets stay
  readable.
- Your changes apply to the dashboard when you
  click the “Apply” button.
*/

/* CUSTOM CSS RULES

You aren’t limited to editing variables in :root — 
you can also write your own selectors and custom
CSS rules below.

For example, you can:
- Target specific widgets
- Adjust button styles
- Add custom animations

When overriding existing styles from the tracker’s
core CSS, you may need to use the !important tag.

Use !important sparingly and only when needed, as
it forces your rule to take priority and can make
themes harder to tweak later.
*/

/* SUBMITTING YOUR DESIGNS

Want your custom theme featured on Holiday Tracker
Hub?

Share your finished design in our Discord server’s
#theme-submissions channel.

If we like it, your theme might be added to the
official tracker preset list.
*/

/* Have fun customizing the tracker! */


:root {
  --bg: #0f0f10;
  --body-bg: #000000;

  --panel: #1a1a1a;
  --panel-2: #161616;
  --panel-3: #151515;
  --panel-4: #141414;
  --panel-5: #121212;
  --panel-6: #111111;
  --panel-7: #0a0a0a;
  --panel-elevated: #1c1c1c;
  --panel-sidebar: #151515;
  --panel-control: #222222;

  --text: #ffffff;
  --text-muted: #cfcfcf;
  --text-muted-2: #d0d0d0;
  --text-muted-3: #b0b0b0;
  --text-muted-4: #8f8f8f;
  --text-muted-5: #9a9a9a;
  --text-muted-6: #7f7f7f;
  --text-muted-7: #cccccc;
  --text-muted-8: #dddddd;
  --text-muted-9: #cecece;
  --text-muted-10: #9ca3af;
  --text-muted-11: #e5e5e5;
  --text-muted-12: #c7c7c7;
  --text-muted-13: #eaeaea;
  --text-muted-14: #d9d9e0;
  --text-muted-15: #d1d1d1;
  --text-muted-16: #e7e7ea;
  --text-muted-17: #6e6e6e;
  --text-placeholder: #8a8a8a;

  --text-strong: #e5f0ff;
  --text-subtle: #7abaff;
  --text-warning: #facc15;

  --icon-subtle: #ffffff7c;

  --accent: #3c53e8;
  --accent-strong: #2563eb;
  --accent-soft: #2f6bff;
  --accent-soft-bg: #2f6aff21;
  --accent-tab-grad-1: #2f6bff33;
  --accent-tab-grad-2: #2f6bff11;
  --accent-forecast-text: #00A1FB;
  --accent-forecast-pill: #00315B;

  --danger-bg: #d9060631;
  --danger-bg-hover: #d9060641;
  --danger-border: rgba(255, 0, 0, 0.5);
  --danger-border-hover: rgba(255, 0, 0, 0.55);

  --pin-color: #ff4f64;
  --weather-feels: #6e6e6e;

  --hover: #272727;
  --hover-strong: #2a2a2a;
  --hover-soft: #262626;
  --hover-alt: #2b2b2b;

  --outline: #ffffff;

  --border-subtle: #ffffff10;
  --border-subtle-2: #ffffff08;
  --border-subtle-3: #ffffff14;
  --border-subtle-4: #ffffff15;
  --border-soft: #ffffff18;
  --border-soft-2: #ffffff20;
  --border-soft-3: #ffffff22;
  --border-strong: #303030;
  --border-strong-2: #ffffff40;
  --border-strong-3: #ffffff41;
  --border-strong-4: #ffffff44;
  --border-strong-5: #ffffff55;
  --border-control: rgba(255, 255, 255, 0.04);
  --border-alt: #3a3a3a;
  --flag-border: #303030;

  --bg-control: #222222;
  --bg-input: #121212;
  --bg-input-alt: #0a0a0a;
  --bg-button: #1a1a1a;
  --bg-button-alt: #141414;
  --bg-hero: #111111;

  --bg-photo-skeleton-1: #141414;
  --bg-photo-skeleton-2: #1b1b1b;

  --bg-theme-dot: #4b5563;
  
  --bg-settings-card: rgba(255, 255, 255, 0.025);

  --bg-overlay-strong: rgba(0, 0, 0, 0.6);
  --bg-overlay-medium: rgba(0, 0, 0, 0.55);
  --bg-overlay-modal: rgba(0, 0, 0, 0.5);
  --bg-photo-caption: rgba(0, 0, 0, 0.6);

  --shadow: 7px 5px 10px -2px rgba(0, 0, 0, 0.308);
  --shadow-medium: 3px 4px 9px -1px rgba(0, 0, 0, 0.45);
  --shadow-strong: 0 20px 60px rgba(0, 0, 0, 0.5);
  --shadow-modal: 0 24px 80px rgba(0, 0, 0, 0.7);
  --shadow-sidebar: 0px 0px 42px 12px rgba(0, 0, 0, 0.86);
  --shadow-panel: 12px 0 30px rgba(0, 0, 0, 0.35);
  --shadow-flag: 0 2px 8px rgba(0, 0, 0, 0.35);
  --shadow-pin: 0 6px 10px rgba(0, 0, 0, 0.45);
  --shadow-widget: 7px 5px 10px -2px rgba(0, 0, 0, 0.66);

  --spinner-border: rgba(255, 255, 255, 0.2);
  --focus-ring: 0 0 0 3px rgba(60, 83, 232, 0.2);

  --gradient-settings-tab: linear-gradient(90deg, var(--accent-tab-grad-1), var(--accent-tab-grad-2));
  --gradient-system-theme-dot: linear-gradient(135deg, var(--bg-theme-dark) 0, var(--bg-theme-dark) 48%, var(--bg-theme-light) 52%, var(--bg-theme-light) 100%);
  --gradient-city-hero: linear-gradient(180deg, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0.65) 70%, rgba(0, 0, 0, 0.9) 100%);
  --gradient-photo-skeleton: linear-gradient(90deg, var(--bg-photo-skeleton-1) 0%, var(--bg-photo-skeleton-2) 50%, var(--bg-photo-skeleton-1) 100%);

  --shadow-search: var(--shadow-strong);

  --radius: 8px;
  --top-offset: 180px;
  --side-offset: 24px;

  --container-w:70%;
  --container-max:1500px;

  --clock: url(/images/clock.png);

  --icon-filter: invert(1);
}

#dawn-img {
  background-image: url('/images/icons/time-of-day/dawn.png');
}

#noon-img {
  background-image: url('/images/icons/time-of-day/noon.png');
}

#dusk-img {
  background-image: url('/images/icons/time-of-day/dusk.png');
}

#night-img {
  background-image: url('/images/icons/time-of-day/night.png');
}