/* =========================================================================
   Kielkraft - design tokens & base
   Direction: trustworthy German marine webshop (navy / white / signal red),
   referenced from awn.de, bootshop-online, aussenborder-markt.
   ========================================================================= */

/* ---- Self-hosted fonts (woff2, latin) ---- */
@font-face { font-family: "Archivo"; font-weight: 600; font-style: normal; font-display: swap; src: url("../fonts/archivo-600.woff2") format("woff2"); }
@font-face { font-family: "Archivo"; font-weight: 700; font-style: normal; font-display: swap; src: url("../fonts/archivo-700.woff2") format("woff2"); }
@font-face { font-family: "Archivo"; font-weight: 800; font-style: normal; font-display: swap; src: url("../fonts/archivo-800.woff2") format("woff2"); }
@font-face { font-family: "Source Sans 3"; font-weight: 400; font-style: normal; font-display: swap; src: url("../fonts/source-sans-3-400.woff2") format("woff2"); }
@font-face { font-family: "Source Sans 3"; font-weight: 600; font-style: normal; font-display: swap; src: url("../fonts/source-sans-3-600.woff2") format("woff2"); }
@font-face { font-family: "Source Sans 3"; font-weight: 700; font-style: normal; font-display: swap; src: url("../fonts/source-sans-3-700.woff2") format("woff2"); }

:root {
    /* ---- Brand palette ---- */
    --navy:      #0B2F55;   /* primary brand: header, nav, CTA */
    --navy-700:  #14406F;
    --navy-800:  #092642;
    --navy-900:  #061B30;   /* footer */
    --blue:      #1366C4;   /* links, secondary actions */
    --blue-700:  #0F4E97;
    --red:       #D8232A;   /* sale / signal (used sparingly) */
    --red-700:   #B71C22;
    --green:     #1F9D55;   /* in-stock */
    --gold:      #E0A12E;   /* bestseller / top badge */

    /* ---- Neutrals ---- */
    --ink:       #16263A;
    --body:      #3A4A5C;
    --muted:     #6B7C8C;
    --line:      #E1E8EE;
    --line-2:    #EDF1F5;
    --bg:        #F3F6F9;
    --surface:   #FFFFFF;
    --surface-2: #F7FAFC;

    /* ---- Semantic ---- */
    --c-ink: var(--ink);
    --c-body: var(--body);
    --c-muted: var(--muted);
    --c-line: var(--line);
    --c-bg: var(--bg);
    --c-surface: var(--surface);
    --c-cta: var(--navy);
    --c-cta-ink: #fff;
    --c-link: var(--blue);
    --warm: var(--gold);
    --cool: var(--blue);

    /* ---- Type ---- */
    --font-display: "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;
    --font-sans:    "Source Sans 3", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

    --fs-100: 0.78rem;
    --fs-200: 0.875rem;
    --fs-300: 1rem;
    --fs-400: 1.0625rem;
    --fs-500: clamp(1.2rem, 1.05rem + 0.6vw, 1.45rem);
    --fs-600: clamp(1.45rem, 1.2rem + 1vw, 1.95rem);
    --fs-700: clamp(1.8rem, 1.45rem + 1.6vw, 2.6rem);
    --fs-800: clamp(2.2rem, 1.7rem + 2.4vw, 3.3rem);

    --lh-tight: 1.12;
    --lh-snug: 1.3;
    --lh-base: 1.6;

    --sp-1: 0.25rem; --sp-2: 0.5rem; --sp-3: 0.75rem; --sp-4: 1rem;
    --sp-5: 1.5rem;  --sp-6: 2rem;   --sp-7: 3rem;   --sp-8: 4rem; --sp-9: 5.5rem;

    --r-sm: 4px; --r-md: 8px; --r-lg: 12px; --r-pill: 999px;
    --sh-sm: 0 1px 2px rgba(11,47,85,.08), 0 1px 3px rgba(11,47,85,.05);
    --sh-md: 0 6px 18px rgba(11,47,85,.10);
    --sh-lg: 0 16px 40px rgba(11,47,85,.14);
    --ease: cubic-bezier(.22,.61,.36,1);
    --dur: 200ms;

    --container: 1280px;
    --container-narrow: 760px;
    --header-h: 64px;
}

/* ---- Reset ---- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}

body {
    font-family: var(--font-sans);
    font-size: var(--fs-300);
    line-height: var(--lh-base);
    color: var(--body);
    background: var(--bg);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 { font-family: var(--font-display); color: var(--ink); line-height: var(--lh-tight); font-weight: 700; letter-spacing: -0.01em; }
h1 { font-size: var(--fs-800); font-weight: 800; }
h2 { font-size: var(--fs-700); }
h3 { font-size: var(--fs-500); }
p { line-height: var(--lh-base); }
a { color: var(--blue-700); text-decoration: none; transition: color var(--dur) var(--ease); }
a:hover { color: var(--blue); }
img, picture, svg, video { display: block; max-width: 100%; height: auto; }
ul, ol { padding: 0; list-style: none; }
button, input, select, textarea { font: inherit; color: inherit; }

.num, .price { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; }

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

.visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.skip-link { position: absolute; left: var(--sp-3); top: -100%; z-index: 1000; background: var(--navy); color: #fff; padding: var(--sp-3) var(--sp-4); border-radius: var(--r-sm); transition: top var(--dur) var(--ease); }
.skip-link:focus { top: var(--sp-3); color: #fff; }
.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--sp-4); }
.container--narrow { max-width: var(--container-narrow); }