/* =====================================================================
   General Sports Sweden — Brand Stylesheet
   ---------------------------------------------------------------------
   Brand colors and design tokens derived from the official company logo.
   See BRANDING.md for full usage guidelines.
   ===================================================================== */

:root {
    /* -----------------------------------------------------------------
     Primary brand colors
     ----------------------------------------------------------------- */
    --gs-black: #0f0f0f;
    --gs-cream: #e8d4a2;
    --gs-red: #9e2a2b;

    /* -----------------------------------------------------------------
     Swedish flag accents
     ----------------------------------------------------------------- */
    --gs-blue: #006aa7;
    --gs-yellow: #fecc00;

    /* -----------------------------------------------------------------
     Supporting shades
     ----------------------------------------------------------------- */
    --gs-black-soft: #2a2a2a;
    --gs-cream-light: #f5e9c8;
    --gs-cream-dark: #c9b280;
    --gs-red-dark: #7a1f20;
    --gs-red-light: #c04748;
    --gs-blue-dark: #004f7c;
    --gs-yellow-dark: #d8ae00;

    /* -----------------------------------------------------------------
     Semantic tokens
     ----------------------------------------------------------------- */
    --gs-color-bg: var(--gs-cream);
    --gs-color-surface: var(--gs-cream-light);
    --gs-color-text: var(--gs-black);
    --gs-color-text-muted: var(--gs-black-soft);
    --gs-color-text-on-dark: var(--gs-cream);
    --gs-color-primary: var(--gs-red);
    --gs-color-primary-hover: var(--gs-red-dark);
    --gs-color-secondary: var(--gs-blue);
    --gs-color-accent: var(--gs-yellow);
    --gs-color-border: var(--gs-cream-dark);

    /* -----------------------------------------------------------------
     Typography
     ----------------------------------------------------------------- */
    --gs-font-heading: "Oswald", "Bebas Neue", "Impact", sans-serif;
    --gs-font-body: "Inter", "Roboto", system-ui, -apple-system, "Segoe UI",
        sans-serif;

    --gs-font-size-base: 1rem;
    --gs-font-size-sm: 0.875rem;
    --gs-font-size-lg: 1.125rem;
    --gs-font-size-xl: 1.5rem;
    --gs-font-size-2xl: 2rem;
    --gs-font-size-3xl: 3rem;

    --gs-font-weight-regular: 400;
    --gs-font-weight-medium: 500;
    --gs-font-weight-bold: 700;

    /* -----------------------------------------------------------------
     Spacing scale
     ----------------------------------------------------------------- */
    --gs-space-xs: 0.25rem;
    --gs-space-sm: 0.5rem;
    --gs-space-md: 1rem;
    --gs-space-lg: 1.5rem;
    --gs-space-xl: 2.5rem;
    --gs-space-2xl: 4rem;

    /* -----------------------------------------------------------------
     Radii & shadows
     ----------------------------------------------------------------- */
    --gs-radius-sm: 4px;
    --gs-radius-md: 8px;
    --gs-radius-lg: 16px;
    --gs-radius-pill: 999px;

    --gs-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.08);
    --gs-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.12);
    --gs-shadow-lg: 0 10px 30px rgba(0, 0, 0, 0.18);

    /* -----------------------------------------------------------------
     Layout
     ----------------------------------------------------------------- */
    --gs-container-max: 1200px;
    --gs-transition: 200ms ease-in-out;
}

/* =====================================================================
   Base elements
   ===================================================================== */

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    font-size: 16px;
    scroll-behavior: smooth;
}

body {
    margin: 0;
    font-family: var(--gs-font-body);
    font-size: var(--gs-font-size-base);
    line-height: 1.6;
    color: var(--gs-color-text);
    background-color: var(--gs-color-bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--gs-font-heading);
    font-weight: var(--gs-font-weight-bold);
    line-height: 1.2;
    margin: 0 0 var(--gs-space-md);
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

h1 {
    font-size: var(--gs-font-size-3xl);
}
h2 {
    font-size: var(--gs-font-size-2xl);
}
h3 {
    font-size: var(--gs-font-size-xl);
}

p {
    margin: 0 0 var(--gs-space-md);
}

a {
    color: var(--gs-color-secondary);
    text-decoration: none;
    transition: color var(--gs-transition);
}

a:hover,
a:focus {
    color: var(--gs-blue-dark);
    text-decoration: underline;
}

hr {
    border: 0;
    height: 1px;
    background-color: var(--gs-color-border);
    margin: var(--gs-space-xl) 0;
}

/* =====================================================================
   Utility classes — color helpers
   ===================================================================== */

.gs-bg-black {
    background-color: var(--gs-black);
}
.gs-bg-cream {
    background-color: var(--gs-cream);
}
.gs-bg-cream-light {
    background-color: var(--gs-cream-light);
}
.gs-bg-red {
    background-color: var(--gs-red);
}
.gs-bg-blue {
    background-color: var(--gs-blue);
}
.gs-bg-yellow {
    background-color: var(--gs-yellow);
}

.gs-text-black {
    color: var(--gs-black);
}
.gs-text-cream {
    color: var(--gs-cream);
}
.gs-text-red {
    color: var(--gs-red);
}
.gs-text-blue {
    color: var(--gs-blue);
}
.gs-text-yellow {
    color: var(--gs-yellow);
}

.gs-border-black {
    border: 2px solid var(--gs-black);
}
.gs-border-red {
    border: 2px solid var(--gs-red);
}
.gs-border-cream {
    border: 2px solid var(--gs-cream-dark);
}

/* =====================================================================
   Layout helpers
   ===================================================================== */

.gs-container {
    width: 100%;
    max-width: var(--gs-container-max);
    margin-inline: auto;
    padding-inline: var(--gs-space-lg);
}

.gs-section {
    padding-block: var(--gs-space-2xl);
}

/* =====================================================================
   Header & navigation
   ===================================================================== */

.gs-header {
    background-color: var(--gs-black);
    color: var(--gs-cream);
    padding: var(--gs-space-md) 0;
    border-bottom: 4px solid var(--gs-red);
}

.gs-header a {
    color: var(--gs-cream);
}

.gs-header a:hover {
    color: var(--gs-yellow);
}

.gs-nav {
    display: flex;
    gap: var(--gs-space-lg);
    align-items: center;
}

/* =====================================================================
   Buttons
   ===================================================================== */

.gs-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--gs-space-sm);
    padding: var(--gs-space-sm) var(--gs-space-lg);
    font-family: var(--gs-font-heading);
    font-size: var(--gs-font-size-base);
    font-weight: var(--gs-font-weight-bold);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border: 2px solid transparent;
    border-radius: var(--gs-radius-md);
    cursor: pointer;
    transition: background-color var(--gs-transition),
        color var(--gs-transition), border-color var(--gs-transition),
        transform var(--gs-transition);
    text-decoration: none;
}

.gs-btn:hover {
    transform: translateY(-1px);
    text-decoration: none;
}

.gs-btn-primary {
    background-color: var(--gs-red);
    color: var(--gs-cream);
}

.gs-btn-primary:hover {
    background-color: var(--gs-red-dark);
    color: var(--gs-cream);
}

.gs-btn-secondary {
    background-color: var(--gs-black);
    color: var(--gs-cream);
}

.gs-btn-secondary:hover {
    background-color: var(--gs-black-soft);
    color: var(--gs-yellow);
}

.gs-btn-outline {
    background-color: transparent;
    color: var(--gs-black);
    border-color: var(--gs-black);
}

.gs-btn-outline:hover {
    background-color: var(--gs-black);
    color: var(--gs-cream);
}

/* =====================================================================
   Card
   ===================================================================== */

.gs-card {
    background-color: var(--gs-cream-light);
    border: 1px solid var(--gs-color-border);
    border-radius: var(--gs-radius-md);
    padding: var(--gs-space-lg);
    box-shadow: var(--gs-shadow-sm);
    transition: box-shadow var(--gs-transition), transform var(--gs-transition);
}

.gs-card:hover {
    box-shadow: var(--gs-shadow-md);
    transform: translateY(-2px);
}

/* =====================================================================
   Banner / hero
   ===================================================================== */

.gs-hero {
    background-color: var(--gs-black);
    color: var(--gs-cream);
    padding: var(--gs-space-2xl) var(--gs-space-lg);
    text-align: center;
    position: relative;
    overflow: hidden;
}

.gs-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        90deg,
        transparent 0%,
        var(--gs-red) 50%,
        transparent 100%
    );
    height: 6px;
    top: 50%;
    opacity: 0.15;
    transform: translateY(-50%);
}

.gs-hero h1 {
    color: var(--gs-cream);
    font-size: var(--gs-font-size-3xl);
}

.gs-hero .gs-accent {
    color: var(--gs-red-light);
}

/* =====================================================================
   Footer
   ===================================================================== */

.gs-footer {
    background-color: var(--gs-black);
    color: var(--gs-cream);
    padding: var(--gs-space-xl) var(--gs-space-lg);
    border-top: 4px solid var(--gs-red);
    text-align: center;
    font-size: var(--gs-font-size-sm);
}

.gs-footer a {
    color: var(--gs-yellow);
}

/* =====================================================================
   Accessibility helpers
   ===================================================================== */

:focus-visible {
    outline: 3px solid var(--gs-yellow);
    outline-offset: 2px;
    border-radius: var(--gs-radius-sm);
}

.gs-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}