/* Seattle Kraken — Deep Sea Blue, Ice Blue, Boundless Blue, Red */

:root {
    /* Primary: boundless blue */
    --pico-primary: #355464;
    --pico-primary-hover: #2a4450;
    --pico-primary-focus: rgba(53, 84, 100, 0.25);
    --pico-primary-inverse: #fff;
    --pico-primary-background: #355464;
    --pico-primary-background-hover: #2a4450;
    --pico-primary-border: #355464;
    --pico-primary-border-hover: #2a4450;
    --pico-primary-underline: rgba(53, 84, 100, 0.5);

    --pico-form-element-active-border-color: #355464;
    --pico-switch-checked-background-color: #355464;

    /* Surface: ice-tinted white */
    --pico-background-color: #f0f6f8;
    --pico-card-background-color: #ffffff;
    --pico-card-sectioning-background-color: #e4f0f4;

    /* Text: deep sea blue */
    --pico-color: #001628;
    --pico-muted-color: #4a6878;
    --pico-muted-border-color: #bcd0d8;

    /* Secondary: red accent */
    --pico-secondary: #c8102e;
    --pico-secondary-hover: #a80d26;
    --pico-secondary-focus: rgba(200, 16, 46, 0.25);
    --pico-secondary-inverse: #fff;

    /* Contrast */
    --pico-contrast: #001628;
    --pico-contrast-hover: #355464;
    --pico-contrast-inverse: #fff;
}

[data-theme="dark"] {
    /* Primary: ice blue */
    --pico-primary: #99d9d9;
    --pico-primary-hover: #b0e4e4;
    --pico-primary-focus: rgba(153, 217, 217, 0.3);
    --pico-primary-inverse: #001628;
    --pico-primary-background: #355464;
    --pico-primary-background-hover: #406878;
    --pico-primary-border: #99d9d9;
    --pico-primary-border-hover: #b0e4e4;
    --pico-primary-underline: rgba(153, 217, 217, 0.5);

    --pico-form-element-active-border-color: #99d9d9;
    --pico-switch-checked-background-color: #355464;

    /* Surface: deep sea blue */
    --pico-background-color: #001628;
    --pico-card-background-color: #002038;
    --pico-card-sectioning-background-color: #002a44;

    /* Text */
    --pico-color: #d8e8f0;
    --pico-muted-color: #88a8b8;
    --pico-muted-border-color: #1a3848;

    /* Secondary: red */
    --pico-secondary: #e83050;
    --pico-secondary-hover: #f04868;
    --pico-secondary-focus: rgba(232, 48, 80, 0.3);
    --pico-secondary-inverse: #001628;

    /* Contrast */
    --pico-contrast: #d8e8f0;
    --pico-contrast-hover: #99d9d9;
    --pico-contrast-inverse: #001628;
}

/* Layer 2: body::before — fixed top stripe in team colors */
body::before {
    content: "";
    display: block;
    height: 6px;
    background: linear-gradient(to right, #001628, #355464, #99d9d9);
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
}

body {
    padding-top: 6px;
}

/* Layer 2: Subtle diagonal jersey texture */
:root {
    background-image:
        repeating-linear-gradient(
            135deg,
            transparent,
            transparent 10px,
            rgba(0, 22, 40, 0.015) 10px,
            rgba(0, 22, 40, 0.015) 11px
        );
}

[data-theme="dark"] {
    background-image:
        repeating-linear-gradient(
            135deg,
            transparent,
            transparent 10px,
            rgba(153, 217, 217, 0.03) 10px,
            rgba(153, 217, 217, 0.03) 11px
        );
}

/* Layer 3: Nav gradient background */
nav {
    background: linear-gradient(to right, rgba(0, 22, 40, 0.06), rgba(53, 84, 100, 0.06)) !important;
    border-bottom: 3px solid transparent !important;
    border-image: linear-gradient(to right, #001628, #355464, #99d9d9) 1 !important;
}

[data-theme="dark"] nav {
    background: linear-gradient(to right, rgba(0, 22, 40, 0.15), rgba(53, 84, 100, 0.1)) !important;
}

/* Layer 4: Article cards get team-color accent + shadow */
article {
    border-left: 3px solid #c8102e;
    box-shadow: 0 1px 3px rgba(0, 22, 40, 0.08);
    padding-left: 1.25rem;
}

[data-theme="dark"] article {
    border-left-color: #e83050;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

/* Layer 5: Bold team-style buttons */
[role="button"],
button,
input[type="submit"],
input[type="button"] {
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 600;
}

/* Layer 6: Footer stripe */
footer {
    border-top: 2px solid transparent;
    border-image: linear-gradient(to right, #001628, #355464, #99d9d9) 1;
    padding-top: 1rem;
}