/* ==========================================================================
   Tropical Wave Weather - design tokens
   Single source for colour, type, spacing, radius, and elevation.
   Values come from docs/brand-guidelines.pdf. Nothing in main.css hardcodes
   a hex value.
   ========================================================================== */

:root {
    /* Brand palette */
    --deep-ocean-blue: #0B2D63;
    --tropical-blue:   #0089D8;
    --hurricane-cyan:  #22C7FF;
    --sunrise-orange:  #F47B20;
    --storm-gray:      #5D6670;
    --midnight-navy:   #071B3D;
    --white:           #FFFFFF;

    /* Tints and shades derived from the palette, not invented alongside it */
    --deep-ocean-blue-90: #12386f;
    --deep-ocean-blue-05: #eef3fa;
    --tropical-blue-10:   #e5f4fd;
    --hurricane-cyan-10:  #e8f9ff;
    --sunrise-orange-10:  #fdf0e6;
    --storm-gray-30:      #c3c8ce;
    --storm-gray-15:      #e2e5e8;
    --storm-gray-08:      #f1f3f4;

    /* Semantic surface and text roles. Themed below. */
    --surface:          var(--white);
    --surface-sunken:   var(--storm-gray-08);
    --surface-raised:   var(--white);
    --surface-inverse:  var(--midnight-navy);
    --border:           var(--storm-gray-15);
    --border-strong:    var(--storm-gray-30);

    --text:             var(--midnight-navy);
    --text-muted:       var(--storm-gray);
    --text-inverse:     var(--white);
    --text-link:        var(--deep-ocean-blue);
    --text-link-hover:  var(--tropical-blue);

    --accent:           var(--tropical-blue);
    --accent-strong:    var(--deep-ocean-blue);
    --alert:            var(--sunrise-orange);

    /* Saffir-Simpson scale. Ordered so intensity reads as heat, and each step
       is distinguishable without relying on hue alone: every category chip
       also carries its number as text. */
    --cat-td:  #6fb8e0;
    --cat-ts:  #35d6c2;
    --cat-1:   #ffe066;
    --cat-2:   #ffb54d;
    --cat-3:   #ff7a45;
    --cat-4:   #f2445c;
    --cat-5:   #c2367f;

    /* Brand gradient. Used sparingly per the guidelines: buttons, hero, radar
       overlays, video graphics. */
    --gradient-brand: linear-gradient(135deg,
        var(--deep-ocean-blue) 0%,
        var(--tropical-blue) 55%,
        var(--hurricane-cyan) 100%);

    /* Typography */
    --font-display: "Sora", "Montserrat", system-ui, -apple-system, "Segoe UI", sans-serif;
    --font-body:    "Inter", "Source Sans Pro", system-ui, -apple-system, "Segoe UI", sans-serif;
    --font-numeric: "Montserrat", var(--font-body);

    /* Fluid type scale. clamp() pairs a floor, a viewport-relative middle, and
       a ceiling, so headings scale continuously between 360px and 1440px
       without a single breakpoint jump. */
    --step--1: clamp(0.83rem, 0.80rem + 0.15vw, 0.92rem);
    --step-0:  clamp(1.00rem, 0.96rem + 0.20vw, 1.13rem);
    --step-1:  clamp(1.20rem, 1.12rem + 0.40vw, 1.50rem);
    --step-2:  clamp(1.44rem, 1.29rem + 0.75vw, 2.00rem);
    --step-3:  clamp(1.73rem, 1.47rem + 1.30vw, 2.66rem);
    --step-4:  clamp(2.07rem, 1.65rem + 2.10vw, 3.55rem);
    --step-5:  clamp(2.49rem, 1.80rem + 3.45vw, 4.74rem);

    --leading-tight:  1.08;
    --leading-snug:   1.25;
    --leading-normal: 1.6;

    --tracking-tight: -0.02em;
    --tracking-wide:  0.08em;

    /* Spacing, on a 4px base */
    --space-1:  0.25rem;
    --space-2:  0.5rem;
    --space-3:  0.75rem;
    --space-4:  1rem;
    --space-5:  1.5rem;
    --space-6:  2rem;
    --space-7:  3rem;
    --space-8:  4rem;
    --space-9:  6rem;

    /* Radius. 12px on buttons and cards per the guidelines. */
    --radius-sm: 8px;
    --radius:    12px;
    --radius-lg: 20px;
    --radius-pill: 999px;

    /* Elevation. Minimal shadows, as specified. */
    --shadow-sm: 0 1px 2px rgba(7, 27, 61, 0.06);
    --shadow:    0 4px 16px rgba(7, 27, 61, 0.08);
    --shadow-lg: 0 12px 40px rgba(7, 27, 61, 0.12);

    /* Layout */
    --header-height: 72px;
    --content-max:   1240px;
    --content-narrow: 72ch;
    --gutter: clamp(1rem, 4vw, 2.5rem);

    /* Motion */
    --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
    --duration-fast: 140ms;
    --duration:      220ms;
    --duration-slow: 420ms;

    --z-header: 100;
    --z-mega:   90;
    --z-mobile-bar: 95;
    --z-a11y:   120;

    /* Accessibility panel writes this; every font-size below inherits it. */
    --text-scale: 1;
}

/* --------------------------------------------------------------------------
   Dark theme. Applied when the user asks for it, or automatically when the OS
   asks and the user has not overridden. Storm data is read at night during an
   event, so this is not decorative.
   -------------------------------------------------------------------------- */

:root[data-theme="dark"] {
    --surface:         #0a1b34;
    --surface-sunken:  var(--midnight-navy);
    --surface-raised:  #10254a;
    --border:          #1d3559;
    --border-strong:   #2c4a75;

    --text:            #eaf1fb;
    --text-muted:      #a4b4c9;
    --text-link:       var(--hurricane-cyan);
    --text-link-hover: var(--white);

    --accent:          var(--hurricane-cyan);
    --accent-strong:   var(--tropical-blue);

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow:    0 4px 16px rgba(0, 0, 0, 0.45);
    --shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.55);
}

@media (prefers-color-scheme: dark) {
    :root[data-theme="auto"] {
        --surface:         #0a1b34;
        --surface-sunken:  var(--midnight-navy);
        --surface-raised:  #10254a;
        --border:          #1d3559;
        --border-strong:   #2c4a75;

        --text:            #eaf1fb;
        --text-muted:      #a4b4c9;
        --text-link:       var(--hurricane-cyan);
        --text-link-hover: var(--white);

        --accent:          var(--hurricane-cyan);
        --accent-strong:   var(--tropical-blue);

        --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
        --shadow:    0 4px 16px rgba(0, 0, 0, 0.45);
        --shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.55);
    }
}

/* --------------------------------------------------------------------------
   Accessibility preference overrides, set by the a11y panel.
   -------------------------------------------------------------------------- */

:root[data-contrast="high"] {
    --text:         #000000;
    --text-muted:   #23262b;
    --border:       #000000;
    --border-strong: #000000;
    --surface:      #ffffff;
    --surface-sunken: #ffffff;
    --text-link:    #003a8c;
    --shadow-sm: none;
    --shadow: none;
    --shadow-lg: none;
}

:root[data-theme="dark"][data-contrast="high"],
:root[data-contrast="high"][data-theme="dark"] {
    --text:         #ffffff;
    --text-muted:   #e6ecf5;
    --surface:      #000000;
    --surface-sunken: #000000;
    --surface-raised: #0b1424;
    --border:       #ffffff;
    --text-link:    var(--hurricane-cyan);
}

:root[data-spacing="readable"] {
    --leading-normal: 1.9;
    letter-spacing: 0.045em;
    word-spacing: 0.16em;
}

/* Track plot basemap. Land sits under the tracks and must never compete with
   them, so it is low contrast by design in both themes. */
:root {
    --plot-land: rgba(146, 160, 178, 0.20);
    --plot-coast: #8d9bab;
    --plot-border-line: rgba(141, 155, 171, 0.55);
}

:root[data-theme="dark"] {
    --plot-land: rgba(120, 145, 180, 0.18);
    --plot-coast: #5f7794;
    --plot-border-line: rgba(95, 119, 148, 0.5);
}

@media (prefers-color-scheme: dark) {
    :root[data-theme="auto"] {
        --plot-land: rgba(120, 145, 180, 0.18);
        --plot-coast: #5f7794;
        --plot-border-line: rgba(95, 119, 148, 0.5);
    }
}