/* ==========================================================================
   WinCom Go! — Design tokens (merkevare / web)  ·  utkast v0.1, 2026-09-29
   Én master-palett avledet fra «Hverdag + Røntgen».
   Fonter er selvhostet (SIL OFL), latin inkludert æøå. Ingen Google-kall.
   ========================================================================== */

@font-face {
  font-family: "Instrument Serif";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/instrument-serif-normal-400.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Instrument Serif";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/instrument-serif-italic-400.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Instrument Sans";
  font-style: normal;
  font-weight: 400 700;
  font-stretch: 100%;
  font-display: swap;
  src: url("fonts/instrument-sans.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "DM Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/dm-mono-normal-400.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "DM Mono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/dm-mono-normal-500.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@property --p {
  syntax: "<number>";
  inherits: true;
  initial-value: 0;
}

:root {
  --wc-sno: #FFFFFF;
  --wc-take: #EDEFF2;
  --wc-stein: #C9CFD6;
  --wc-blekk: #0B1B2B;
  --wc-fjord: #5B7FA6;
  --wc-coral: #FF5B35;
  --wc-dypfjord: #34587F;
  --wc-coral-dyp: #C2361A;
  --wc-nordlys: #2ED6A6;
  --wc-nordlys-dyp: #0F7A5C;
  --wc-isfjord: #8FB3DC;
  --wc-skifer: #5B6B7C;
  --wc-grus: #848F9C;
  --wc-kveld: #16293D;
  --wc-coral-50: #FFF0EB;
  --wc-fjord-50: #EAF0F7;
  --wc-nordlys-50: #E3F8F1;

  --color-bg: var(--wc-sno);
  --color-bg-subtle: var(--wc-take);
  --color-surface: var(--wc-sno);
  --color-surface-inverse: var(--wc-blekk);
  --color-text: var(--wc-blekk);
  --color-text-muted: var(--wc-skifer);
  --color-text-inverse: var(--wc-sno);
  --color-link: var(--wc-dypfjord);
  --color-border: var(--wc-stein);
  --color-border-strong: var(--wc-grus);
  --color-focus: var(--wc-dypfjord);
  --color-action: var(--wc-coral);
  --color-on-action: var(--wc-blekk);
  --color-accent-text: var(--wc-coral-dyp);
  --color-success: var(--wc-nordlys);
  --color-success-text: var(--wc-nordlys-dyp);
  --color-info: var(--wc-fjord);

  --xray-line: var(--wc-fjord);
  --xray-line-width: 1px;
  --xray-line-opacity: .85;
  --xray-node: var(--wc-coral);
  --xray-node-size: 8px;
  --xray-node-ring: 20px;
  --xray-label-bg: rgba(255, 255, 255, .94);
  --xray-label-text: var(--wc-blekk);
  --xray-label-font: var(--font-mono);

  --aurora-fjord: #8FB3DC;
  --aurora-coral: #FF5B35;
  --aurora-nordlys: #2ED6A6;
  --aurora-glow:
    radial-gradient(40% 60% at 30% 40%, rgba(143, 179, 220, .55), transparent 70%),
    radial-gradient(35% 50% at 70% 55%, rgba(46, 214, 166, .40), transparent 70%),
    radial-gradient(18% 25% at 55% 45%, rgba(255, 91, 53, .45), transparent 70%);
  --aurora-glass-bg: rgba(255, 255, 255, .55);
  --aurora-glass-border: rgba(255, 255, 255, .8);
  --aurora-glass-blur: 18px;

  --font-display: "Instrument Serif", "Times New Roman", serif;
  --font-body: "Instrument Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "DM Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  --fs-display-xl: clamp(3.25rem, 2.2rem + 4.2vw, 6.5rem);
  --fs-display-l: clamp(2.5rem, 1.9rem + 2.6vw, 4.25rem);
  --fs-h1: clamp(2rem, 1.6rem + 1.6vw, 3rem);
  --fs-h2: clamp(1.5rem, 1.3rem + .8vw, 2rem);
  --fs-h3: 1.25rem;
  --fs-lead: 1.25rem;
  --fs-body: 1.0625rem;
  --fs-small: .875rem;
  --fs-mono: .8125rem;
  --fs-overline: .75rem;

  --lh-tight: 1;
  --lh-heading: 1.15;
  --lh-body: 1.55;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --tracking-display: -0.01em;
  --tracking-mono: 0.02em;
  --tracking-overline: 0.12em;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  --space-32: 128px;
  --section-pad-y: clamp(64px, 8vw, 128px);
  --section-gap: clamp(64px, 8vw, 96px);
  --container-max: 1200px;
  --gutter: clamp(20px, 4vw, 40px);

  --radius-xs: 4px;
  --radius-s: 8px;
  --radius-m: 14px;
  --radius-l: 20px;
  --radius-xl: 28px;
  --radius-pill: 999px;

  --shadow-1: 0 1px 2px rgba(11, 27, 43, .06), 0 1px 1px rgba(11, 27, 43, .04);
  --shadow-2: 0 4px 12px rgba(11, 27, 43, .06), 0 1px 3px rgba(11, 27, 43, .05);
  --shadow-3: 0 12px 32px rgba(11, 27, 43, .08), 0 2px 6px rgba(11, 27, 43, .05);
  --shadow-4: 0 24px 64px rgba(11, 27, 43, .12), 0 4px 12px rgba(11, 27, 43, .06);
  --shadow-coral: 0 8px 24px rgba(255, 91, 53, .28);
  --shadow-glow: 0 0 0 6px rgba(46, 214, 166, .18);

  --ease-out: cubic-bezier(.2, .8, .2, 1);
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);
  --dur-1: 120ms;
  --dur-2: 200ms;
  --dur-3: 320ms;
  --dur-4: 560ms;
  --dur-5: 900ms;

  --btn-height: 48px;
  --btn-pad-x: 22px;
  --btn-radius: var(--radius-pill);
  --btn-font: 600 1rem/1 var(--font-body);
  --card-pad: var(--space-6);
  --card-radius: var(--radius-m);
  --card-shadow: var(--shadow-2);
  --nav-height: 76px;
}

.wc-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: var(--btn-height);
  padding: 0 var(--btn-pad-x);
  border-radius: var(--btn-radius);
  font: var(--btn-font);
  border: 0;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition: transform var(--dur-1) var(--ease-out), box-shadow var(--dur-2) var(--ease-out), background var(--dur-2) var(--ease-out);
}
.wc-btn--primary { background: var(--color-action); color: var(--color-on-action); box-shadow: var(--shadow-coral); }
.wc-btn--primary:hover { background: #FF6E4C; }
.wc-btn--primary:active { background: #E84A25; transform: scale(.98); }
.wc-btn--secondary { background: var(--wc-blekk); color: var(--wc-sno); }
.wc-btn--secondary:hover { background: var(--wc-kveld); }
.wc-btn--ghost {
  background: transparent;
  color: var(--wc-blekk);
  box-shadow: inset 0 0 0 1.5px var(--color-border-strong);
}
.wc-btn--ghost:hover { box-shadow: inset 0 0 0 1.5px var(--wc-blekk); }
.wc-btn:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; }

.wc-card {
  background: var(--color-surface);
  border-radius: var(--card-radius);
  padding: var(--card-pad);
  box-shadow: var(--card-shadow);
  border: 1px solid rgba(201, 207, 214, .6);
}
.wc-overline {
  font: 500 var(--fs-overline)/1 var(--font-mono);
  letter-spacing: var(--tracking-overline);
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin: 0 0 var(--space-4);
}
/* Merkenavnet har egen skrivemåte. Versaler ville gjort det til «WINCOM GO!». */
.wc-overline.merke {
  text-transform: none;
  letter-spacing: 0.01em;
}
.wc-xray-label {
  font: 400 var(--fs-mono)/1.3 var(--font-mono);
  letter-spacing: var(--tracking-mono);
  color: var(--xray-label-text);
  background: var(--xray-label-bg);
  border: 1px solid var(--xray-line);
  border-radius: var(--radius-pill);
  padding: 6px 12px;
}

@media (prefers-reduced-motion: reduce) {
  :root { --dur-1: 0ms; --dur-2: 0ms; --dur-3: 0ms; --dur-4: 0ms; --dur-5: 0ms; }
}