/* ─── Tailwind v4 @theme tokens (speiler en HeroUI tailwind.config.ts) ─── */
:root {
  /* Bakken Motor — videreutviklet palett: grafitt + kald nordisk lys + ÉN lysende marine-aksent.
     Tokennavnene er bevart (bm-navy / bm-accent), verdiene er retunet. Endre her for å rulle tilbake. */

  /* Grafitt / kald marineblå-ramp (kaldt nordisk lys) */
  --bm-navy-50: oklch(96.6% 0.005 258);
  --bm-navy-100: oklch(92.7% 0.009 258);
  --bm-navy-200: oklch(86.1% 0.019 258);
  --bm-navy-300: oklch(72% 0.045 238);
  --bm-navy-500: oklch(53% 0.052 242);
  --bm-navy-600: oklch(43% 0.046 243);
  --bm-navy-700: oklch(33% 0.04 245);
  --bm-navy-800: oklch(25.5% 0.034 247);
  --bm-navy-900: oklch(19% 0.028 248);

  /* Lysende marine-aksent (eneste aksent) */
  --bm-accent-300: oklch(82% 0.095 222); /* glød / aksent på mørk flate */
  --bm-accent-400: oklch(70% 0.115 228);
  --bm-accent-500: var(--bm-navy-800); /* satt til --bm-navy-800-verdien */
  --bm-accent-600: oklch(46% 0.098 237); /* hover */
  --bm-accent-700: oklch(40% 0.085 239);

  /* Bakken rød — reservert for primær CTA (eneste handlingsfarge) */
  --bm-cta-500: #d72a2a; /* hvit tekst ≈ 4.9:1 */
  --bm-cta-600: #b81f1f; /* hover */

  /* Kald panel-tint (erstatter varm sand) */
  --bm-mist-50: oklch(97% 0.012 232);
  --bm-mist-100: oklch(92.8% 0.012 258);

  --bm-ink: oklch(24% 0.02 246); /* grafitt blekk */
  --bm-muted: oklch(46.5% 0.02 244); /* sekundærtekst, ≥4.5:1 på hvit */
  --bm-line: oklch(91% 0.008 236);
  --bm-panel: oklch(98.3% 0.005 235); /* kald nær-hvit flate */
  --bm-bg: oklch(99.2% 0.003 235);

  --bm-ok-bg: oklch(95% 0.045 165);
  --bm-ok-ink: oklch(46% 0.105 165);
  --bm-ok-dot: oklch(64% 0.15 162);

  --bm-warn-bg: oklch(95% 0.045 75); /* rav — bestillingsvare/lavt lager */
  --bm-warn-ink: oklch(48% 0.09 65);
  --bm-warn-dot: oklch(70% 0.13 70);

  --radius-card: 16px;
  --shadow-card: 0 1px 2px oklch(24% 0.02 246 / 0.05), 0 10px 30px oklch(24% 0.02 246 / 0.07);
  --shadow-float: 0 8px 24px oklch(24% 0.02 246 / 0.12), 0 2px 6px oklch(24% 0.02 246 / 0.08);

  /* Semantisk z-index-skala */
  --z-sticky: 30;
  --z-header: 40;
  --z-drawer-backdrop: 50;
  --z-drawer: 51;

  /* Type */
  --font-display: 'Schibsted Grotesk', system-ui, -apple-system, sans-serif;
  --font-mono: 'Spline Sans Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  --ease-out-quart: cubic-bezier(0.165, 0.84, 0.44, 1);
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
}

/* ─── Navbar token-bro (fra #ecom-nav :root, header-relevant) ─── */
:root {
  --maxw: 1320px;
  --z-dropdown: 20;
  --z-toast: 60;
  --z-tooltip: 70;
  /* HeroUI token bridge — synced from product-single-v2 so the navbar anatomy
     layer (.navbar__*, .button--*, .badge--*, .dropdown__*) resolves. Mapped to
     this page's --bm-* palette; --maxw is 1320 to align with page content
     (the product-listing body wrapper). */
  --white: oklch(100% 0 0);
  --background: var(--bm-bg);
  --foreground: var(--bm-ink);
  --surface: var(--white);
  --overlay: var(--white);
  --overlay-foreground: var(--bm-ink);
  --muted: var(--bm-muted);
  --default: var(--bm-navy-50);
  --accent: var(--bm-navy-800);
  --accent-hover: var(--bm-navy-900);
  --accent-foreground: var(--white);
  --danger: var(--bm-cta-500);
  --danger-hover: var(--bm-cta-600);
  --danger-foreground: var(--white);
  --border: var(--bm-line);
  --separator: var(--bm-line);
  --cursor-interactive: pointer;
  --shadow-overlay: var(--shadow-float);

  /* HeroUI field tokens (brukt av kasse/skjema-felt) */
  --field-background: var(--surface);
  --field-foreground: var(--bm-ink);
  --field-placeholder: var(--bm-muted);
  --field-border: var(--bm-line);
  --field-border-focus: var(--bm-navy-800);
}