/**
 * DS-FOUNDATION-1 — Design tokens
 * Brand: Byggmaterial Online (graphite / red / white)
 * Type: Geist Sans (self-hosted)
 */

/* -------------------------------------------------------------------------- */
/* Font faces — self-hosted Geist (npm geist@1.7.2 → public/fonts/geist)      */
/* -------------------------------------------------------------------------- */

@font-face {
  font-family: 'Geist';
  src: url('../fonts/geist/Geist-Variable.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Geist Fallback';
  src: local('Arial');
  ascent-override: 95%;
  descent-override: 22%;
  line-gap-override: 0%;
  size-adjust: 105%;
}

:root {
  /* Brand (raw) */
  --brand-navy: #232A30;
  --brand-gold: #D71920;
  --brand-white: #ffffff;

  /* Surface */
  --surface-base: #ffffff;
  --surface-subtle: #f3f6f8;
  --surface-card: #ffffff;
  --surface-inverse: #232A30;
  /* Elevated nav panels (mega menu) — off-white, distinct from pure white page surfaces */
  --surface-nav-elevated: #f4f7f9;

  /* Text */
  --text-primary: #232A30;
  --text-secondary: #3d5566;
  --text-inverse: #ffffff;
  /* HOME-1R: strengthened for small brand/VAT text (~4.7:1+ on white/subtle) */
  --text-muted: #4f6574;

  /* Border */
  --border-default: #d4dde5;
  --border-strong: #232A30;
  --border-subtle: #e7edf2;

  /* Interactive */
  --action-primary-bg: #232A30;
  --action-primary-text: #ffffff;
  --action-primary-hover: #1a1f24;
  --action-primary-active: #12161a;
  --action-secondary-bg: #ffffff;
  --action-secondary-text: #232A30;
  --action-secondary-border: #232A30;
  --action-link: #232A30;
  --action-focus: #D71920;
  /* High-value commerce accent (gold + navy text for WCAG) */
  --action-accent-bg: #D71920;
  --action-accent-text: #ffffff;
  --action-accent-hover: #A90F15;
  --action-accent-active: #8c0c12;

  /* Header system — one navy */
  --header-navy: #232A30;
  --header-on-navy: #ffffff;
  --header-on-navy-muted: rgb(255 255 255 / 0.78);
  --header-divider: rgb(255 255 255 / 0.12);
  --header-control-bg: rgb(255 255 255 / 0.1);

  /* Catalog media frame */
  --media-frame-bg: #eef2f5;

  /* Status */
  --status-success: #1b6b4a;
  --status-warning: #9a6a14;
  --status-error: #b42318;
  --status-info: #0b5cab;

  /* Commerce */
  --price-primary: #232A30;
  --stock-in: #1b6b4a;
  --stock-low: #9a6a14;
  --stock-out: #6a8090;
  --badge-new: #232A30;
  --badge-campaign: #D71920;
  --badge-used: #3d5566;
  --badge-popular: #0b5cab;
  --badge-recommend: #232A30;
  --badge-outgoing: #6a8090;
  --badge-order: #3d5566;

  /* Spacing scale (px) */
  --space-4: 0.25rem;
  --space-8: 0.5rem;
  --space-12: 0.75rem;
  --space-16: 1rem;
  --space-20: 1.25rem;
  --space-24: 1.5rem;
  --space-32: 2rem;
  --space-40: 2.5rem;
  --space-48: 3rem;
  --space-64: 4rem;
  --space-80: 5rem;

  /* Radius */
  --radius-sm: 0.25rem;
  --radius-md: 0.375rem;
  --radius-lg: 0.625rem;
  --radius-pill: 999px;

  /* Shadow — restrained, technical */
  --shadow-card: 0 1px 2px rgb(35 42 48 / 0.06), 0 4px 12px rgb(35 42 48 / 0.04);
  --shadow-hover: 0 2px 4px rgb(35 42 48 / 0.08), 0 10px 24px rgb(35 42 48 / 0.08);
  --shadow-overlay: 0 8px 32px rgb(35 42 48 / 0.18);

  /* Border widths */
  --border-w-default: 1px;
  --border-w-strong: 2px;

  /* Breakpoints (reference; media queries use literals) */
  --bp-mobile: 0;
  --bp-tablet: 768px;
  --bp-laptop: 1024px;
  --bp-desktop: 1280px;

  /* Containers */
  --container-page: 72rem; /* 1152px */
  --container-narrow: 42rem;
  --container-content: 56rem;
  --card-pad: var(--space-20);

  /* Focus */
  --focus-ring: 0 0 0 2px var(--surface-base), 0 0 0 4px var(--action-focus);

  /* Motion */
  --motion-fast: 120ms;
  --motion-medium: 220ms;
  --ease-standard: cubic-bezier(0.2, 0.8, 0.2, 1);

  /* Typography family */
  --font-sans: 'Geist', 'Geist Fallback', system-ui, sans-serif;

  /* Type scale — locked DS-FOUNDATION-1 */
  --type-display-size: clamp(2.5rem, 1.6rem + 3.2vw, 4rem);
  --type-display-lh: 1.02;
  --type-display-weight: 700;
  --type-display-tracking: -0.035em;

  --type-h1-size: clamp(2rem, 1.45rem + 2.2vw, 3.25rem); /* ~52 */
  --type-h1-lh: 1.05;
  --type-h1-weight: 700;
  --type-h1-tracking: -0.03em;

  --type-h2-size: clamp(1.625rem, 1.3rem + 1.2vw, 2.125rem); /* ~34 */
  --type-h2-lh: 1.15;
  --type-h2-weight: 700;
  --type-h2-tracking: -0.02em;

  --type-h3-size: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem); /* ~24 */
  --type-h3-lh: 1.2;
  --type-h3-weight: 600;
  --type-h3-tracking: -0.015em;

  --type-body-lg-size: 1.1875rem; /* 19 */
  --type-body-lg-lh: 1.55;
  --type-body-lg-weight: 400;

  --type-body-size: 1.0625rem; /* 17 */
  --type-body-lh: 1.55;
  --type-body-weight: 400;

  --type-small-size: 0.875rem; /* 14 */
  --type-small-lh: 1.45;
  --type-small-weight: 400;

  --type-label-size: 0.875rem;
  --type-label-lh: 1.35;
  --type-label-weight: 500;

  --type-button-size: 0.9375rem; /* 15 */
  --type-button-lh: 1;
  --type-button-weight: 600;

  --type-price-lg-size: clamp(1.75rem, 1.5rem + 0.8vw, 2.25rem); /* ~36 */
  --type-price-lg-lh: 1.1;
  --type-price-lg-weight: 700;

  --type-price-size: clamp(1.5rem, 1.35rem + 0.5vw, 1.875rem); /* ~30 */
  --type-price-lh: 1.1;
  --type-price-weight: 700;

  --type-specs-size: 0.9375rem; /* 15 */
  --type-specs-lh: 1.45;
  --type-specs-weight: 500;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --motion-fast: 0ms;
    --motion-medium: 0ms;
  }
}

.sks-nav__badge,
.sks-badge--campaign {
  color: #ffffff;
}

.sks-section .sks-h2 {
  margin-bottom: var(--space-20);
}

.sks-alert {
  margin: 0 0 var(--space-16);
  padding: var(--space-12);
  background: var(--surface-subtle);
  border-left: 4px solid var(--brand-navy);
}

.sks-alert--error {
  border-left-color: var(--status-error);
}

.sks-section .sks-h1,
.sks-container--narrow .sks-body,
.sks-container--narrow .sks-body-lg {
  margin-bottom: var(--space-16);
}

.sks-container--narrow form,
.sks-container form {
  display: grid;
  gap: var(--space-16);
}

textarea.sks-input {
  min-height: 8rem;
}

.sks-cart-drawer__list > li {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
  align-items: center;
}

.sks-cart-drawer__list > li span {
  flex: 1 1 12rem;
}

.sks-search-layer__results {
  list-style: none;
  margin: 0.75rem 0 0;
  padding: 0;
}

.sks-search-layer__results a {
  color: var(--text-primary);
  text-decoration: none;
}

.sks-campaign__media {
  aspect-ratio: 16 / 9;
}