/* =========================================
   1. VARIABLES
   ========================================= */
:root {
    /* Colors - high contrast */
    --blue:   #1565C0; --bg-blue:   #E3F2FD;
    --green:  #2E7D32; --bg-green:  #E8F5E9;
    --yellow: #F57C00; --bg-yellow: #FFF8E1;
    --orange: #D84315; --bg-orange: #FBE9E7;
    --purple: #6A1B9A; --bg-purple: #F3E5F5;
    --black: #000000;
    --white: #ffffff;
    
    /* Sizes - em scale only */
    --header-icon: 16em;
    --list-icon:   8em;
    --scroll-icon: 4em;
    
    /* Borders - em scale only */
    --border-heavy: 4px;
    --border-med:   2px;
    --border-thin:  1px;
    
    /* Necessary non-em units */
    --full-width: 100%;
    --full-height: 100%;
    --viewport-height: 100vh;
    --text-adjust: 100%;
    --stroke-width: 3px;
    --stroke-width-heavy: 4px;
    
    /* Font sizes - element specific with references */
    --font-size-sm: 16px;
    --font-size-base: 18px;
    --font-size-lg: 24px;

    --font-size-marker: 48px;
    --font-size-temp-hour: var(--font-size-base);
    --font-size-overlay: var(--font-size-base);
    --font-size-day: var(--font-size-base);
    --font-size-hour: var(--font-size-base);

    --font-size-temp-min: var(--font-size-sm);
    --font-size-loading-text: var(--font-size-sm);
    --font-size-city: var(--font-size-sm);

    --font-size-temp-main: var(--font-size-lg);
    --font-size-temp-max: var(--font-size-lg);
    --font-size-loading: var(--font-size-lg);
    
    /* Letter spacing */
    --letter-spacing-tight: -0.5px;
    --letter-spacing-normal: 0.5px;
}

/* =========================================
   2. RESET
   ========================================= */
* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }

body {
    font-family: 'Courier New', Courier, monospace;
    background: var(--white);
    color: var(--black);
    min-height: var(--viewport-height);
    display: flex;
    flex-direction: column;
    -webkit-text-size-adjust: var(--text-adjust);
    -ms-text-size-adjust: var(--text-adjust);
}

/* =========================================
   3. UTILITIES
   ========================================= */
svg {
    display: block;
    width: var(--full-width);
    height: var(--full-height);
    fill: none;
    stroke: currentColor;
    stroke-width: var(--stroke-width); 
    stroke-linecap: square;
    stroke-linejoin: miter;
    overflow: visible;
}

/* Color classes */
.bg-blue   { background: var(--bg-blue) !important; color: var(--blue) !important; }
.bg-green  { background: var(--bg-green) !important; color: var(--green) !important; }
.bg-yellow { background: var(--bg-yellow) !important; color: var(--yellow) !important; }
.bg-orange { background: var(--bg-orange) !important; color: var(--orange) !important; }
.bg-purple { background: var(--bg-purple) !important; color: var(--purple) !important; }

.t-blue   { color: var(--blue) !important; }
.t-green  { color: var(--green) !important; }
.t-yellow { color: var(--yellow) !important; }
.t-orange { color: var(--orange) !important; }
.t-purple { color: var(--purple) !important; }

.night-mode { background: var(--black) !important; }

.night-mode.t-blue   { color: var(--blue) !important; }
.night-mode.t-green  { color: var(--green) !important; }
.night-mode.t-yellow { color: var(--yellow) !important; }
.night-mode.t-orange { color: var(--orange) !important; }
.night-mode.t-purple { color: var(--purple) !important; }