/*
 * BUTIKSKLAR I BUTIKSPLANS FARVER — klar til at erstatte :root i app/globals.css
 * og de tilsvarende værdier i hjemmesidens stilark.
 *
 * Navnene (--bk-*) er Butiksklars egne, så resten af koden virker uændret.
 * Værdierne er Butiksplans («retning C — varm tillid»). Se DESIGN.md for
 * reglerne bag, især om abrikos: den må ALDRIG bruges som tekstfarve på hvidt
 * eller lyst, og aldrig med hvid tekst ovenpå.
 */
:root {
  /* Grundfarver */
  --bk-forest: #0f4c5c;        /* petroleum — knapper, menu, overskrifter med farve, mørke kort */
  --bk-forest-dark: #0b3a46;   /* petroleum, hover og tryk */
  --bk-coral: #f4a261;         /* abrikos — KUN flader, prikker og markeringer, aldrig tekst */
  --bk-coral-text: #b85a16;    /* abrikos som tekst/streg på HVID (4,65:1) */
  --bk-coral-deep: #6b3410;    /* tekst på lys abrikos (8,5:1) */
  --bk-coral-soft: #fdebdc;    /* lys abrikos-flade */
  --bk-warm-paper: #fbfaf7;    /* sidens baggrund */
  --bk-soft-cream: #f1f7f8;    /* lys petroleum-flade (rækker, felter, hover) */
  --bk-petrol-soft: #e3eef0;   /* lys petroleum (mærker, valgt) */
  --bk-warm-grey: rgba(15, 76, 92, 0.12); /* hårlinjer — petroleum-tonede, aldrig grå */
  --bk-line-strong: rgba(15, 76, 92, 0.22);
  --bk-white: #ffffff;
  --bk-text: #10262b;          /* brødtekst */
  --bk-text-2: #3b5157;        /* sekundær tekst */
  --bk-muted-text: #4e6166;    /* dæmpet tekst — aldrig lysere end denne (6,5:1 på hvid) */
  --bk-on-petrol-muted: #a9c7ce; /* dæmpet tekst på petroleum (5,3:1) */

  /* Signalfarver */
  --bk-success: #1d6b43;  --bk-success-soft: #e7f4ec;
  --bk-danger: #b42318;   --bk-danger-soft: #fdf0ee;   /* fejl, «Slet», «Annullér salg» — aldrig abrikos */
  --bk-warning-text: #8f4510; --bk-warning-soft: #fdebdc;

  /* Skrift */
  --bk-font-body: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --bk-font-display: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --bk-font-mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace; /* priser, tider, antal, beløb */

  /* Former */
  --bk-radius-small: 8px;
  --bk-radius-medium: 12px;   /* felter, små kort */
  --bk-radius-large: 16px;    /* kort i appen */
  --bk-radius-site: 26px;     /* kort på hjemmesiden */
  --bk-radius-pill: 999px;    /* ALLE knapper */

  /* Skygger — petroleum-tonede og svage, aldrig sorte */
  --bk-shadow-card: 0 1px 2px rgba(15, 76, 92, 0.05), 0 4px 14px -8px rgba(15, 76, 92, 0.12);
  --bk-shadow-card-hover: 0 8px 22px -10px rgba(15, 76, 92, 0.22);
  --bk-shadow-pop: 0 18px 44px -18px rgba(15, 76, 92, 0.38);
  --bk-shadow-btn: 0 1px 2px rgba(15, 76, 92, 0.12), 0 6px 14px -8px rgba(15, 76, 92, 0.4);
  --bk-shadow-site: 0 1px 2px rgba(15, 76, 92, 0.04), 0 24px 48px -32px rgba(15, 76, 92, 0.25);
  --bk-ease: cubic-bezier(0.32, 0.72, 0, 1);

  /* Afstande — uændret */
  --bk-space-1: 4px; --bk-space-2: 8px; --bk-space-3: 12px; --bk-space-4: 16px; --bk-space-5: 24px; --bk-space-6: 32px;

  /* Butiksklars korte navne, nu med de nye værdier */
  --ink: var(--bk-text);
  --paper: var(--bk-warm-paper);
  --line: var(--bk-warm-grey);
  --muted: var(--bk-muted-text);
  --accent: var(--bk-forest);       /* «accent» som TEKST/RAMME er nu petroleum, ikke koral */
  --highlight: var(--bk-coral);     /* den varme farve til flader og prikker */
}

body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--bk-font-body);
  /* Plus Jakarta Sans har et smalt mellemrum; lidt mere luft mellem ordene. */
  word-spacing: 0.03em;
  /* Chrome runder ellers bogstavbredder af, så ord klistrer sammen. */
  text-rendering: geometricPrecision;
  font-kerning: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
button, input, select, textarea { font: inherit; text-rendering: geometricPrecision; font-kerning: normal; }
:focus-visible { outline: 2px solid var(--bk-coral); outline-offset: 2px; }

/* Tal i kolonner, priser, tider, kassebeløb */
.num, .price, .amount { font-family: var(--bk-font-mono); font-variant-numeric: tabular-nums lining-nums; }
