/* =============================================================================
   Eviglader — Design Tokens
   -----------------------------------------------------------------------------
   Single source of truth for farver, typografi, spacing og hierarki.
   Refererer spec sektion 4 (Brand-univers og UX).

   Brug:
     - Import i top af alle stylesheets:  @import url("./tokens.css");
     - Aldrig hardcode farver eller font-stacks andre steder — referér variablen.
     - Hvis du har brug for en farve der ikke er her: STOP. Tjek spec'en.
       Vi udvider ikke paletten uden Lasse-beslutning.

   Licens: Geist Sans + Geist Mono er Vercel OFL (open source).
           https://github.com/vercel/geist-font
           Fallback til Inter (OFL) og system-fonts hvor Geist ikke kan loades.
   ============================================================================= */

/* -----------------------------------------------------------------------------
   Font loading
   - Geist + Inter loades via <link rel="stylesheet"> i index.html
     (ikke @import her, da @import blokerer parallel CSS-loading og koster
     ~300 ms i FCP/LCP).
   - System-fonts som sidste fallback.
   ----------------------------------------------------------------------------- */

:root {
  /* ===========================================================================
     COLORS
     Spec sektion 4 — palette. Ingen blå, ingen pastel, ingen gradienter.
     =========================================================================== */
  --color-bg: #FFFFFF;
  --color-bg-elevated: #FFFFFF;       /* identisk — vi bruger linjer, ikke skygger */
  --color-text-primary: #111111;      /* off-black */
  --color-text-secondary: #6F6F6F;    /* mid grey — labels, meta, timestamps */
  --color-line: #EAEAEA;              /* hairline 1px — divider, kort-frame */

  --color-accent: #D9F549;            /* lime-electric — KUN højeste-værdi-signal */
  --color-accent-ink: #111111;        /* tekst-farve oven på lime-flade */

  --color-warning: #B23A2E;           /* brændt rød — pris markant over gennemsnit, sjælden */

  /* Pin-design specifikke aliases (læser bedre i map-kode) */
  --pin-default-fill: var(--color-text-primary);
  --pin-cheapest-stroke: var(--color-accent);
  --pin-price-text: var(--color-text-primary);
  --pin-price-text-warning: var(--color-warning);

  /* ===========================================================================
     TYPOGRAPHY
     Spec sektion 4 — Geist Sans til UI, Geist Mono til alle tal.
     Hierarki max 5 trin.
     =========================================================================== */
  --font-sans: "Geist", "Geist Sans", "Inter", system-ui, -apple-system,
               "Helvetica Neue", Arial, sans-serif;
  --font-mono: "Geist Mono", "JetBrains Mono", "SF Mono", ui-monospace,
               "Menlo", "Consolas", monospace;

  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-bold: 700;

  /* Hierarki — 5 trin, intet derudover */
  --font-size-display: 32px;          /* h1 — sjælden, fx app store / launch hero */
  --font-size-heading: 24px;          /* h2 — sektion-titler */
  --font-size-subheading: 18px;       /* h3 — kort-titler, fremhævet tekst */
  --font-size-body: 14px;             /* brødtekst, knapper, default UI */
  --font-size-meta: 12px;             /* labels, timestamps, meta-info */

  --line-height-tight: 1.15;          /* display/headings */
  --line-height-normal: 1.45;         /* brødtekst, lister */

  --letter-spacing-tight: -0.02em;    /* displays/headings */
  --letter-spacing-normal: 0;
  --letter-spacing-mono: 0;           /* tab-nums i Mono kræver INGEN tracking */

  /* ===========================================================================
     SPACING — 4px base grid
     =========================================================================== */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;

  /* ===========================================================================
     SIZING / RADIUS / BORDERS
     =========================================================================== */
  --radius-sm: 4px;                   /* knapper, små chips */
  --radius-md: 8px;                   /* kort, sheets */
  --radius-pill: 999px;               /* abo-chips */

  --border-hairline: 1px solid var(--color-line);
  --border-emphasis: 1px solid var(--color-text-primary);

  /* ===========================================================================
     LAYOUT
     =========================================================================== */
  --container-max: 480px;             /* mobile-first — vi caster ikke desktop endnu */
  --topbar-height: 56px;
  --bottom-sheet-handle: 40px;
  --map-min-height: 60vh;             /* kort dominerer altid */

  /* ===========================================================================
     MOTION
     Spec sektion 4 — "Ingen animationer ud over almindelige UI-transitions"
     =========================================================================== */
  --motion-fast: 120ms;
  --motion-base: 180ms;
  --motion-easing: cubic-bezier(0.2, 0, 0, 1);
}

/* =============================================================================
   GLOBAL TYPOGRAPHY DEFAULTS
   ============================================================================= */
html {
  font-family: var(--font-sans);
  font-size: var(--font-size-body);
  line-height: var(--line-height-normal);
  color: var(--color-text-primary);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

body {
  margin: 0;
  background: var(--color-bg);
}

/* =============================================================================
   UTILITY CLASSES
   ============================================================================= */

/* Brug på alt der indeholder tal — sikrer pixelpræcis flugtning i prislister.
   Geist Mono har tabular nums by default, men vi tvinger det eksplicit. */
.tabular-nums,
.price,
.numeric {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1, "lnum" 1;
  letter-spacing: var(--letter-spacing-mono);
}

/* Pris-display — den vigtigste komponent i hele appen. */
.price-primary {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1, "lnum" 1;
  font-size: var(--font-size-subheading);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-primary);
}

.price-cheapest {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1, "lnum" 1;
  font-size: var(--font-size-subheading);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-primary);
  background: var(--color-accent);
  padding: 2px 8px;
  border-radius: var(--radius-sm);
}

.price-warning {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1, "lnum" 1;
  color: var(--color-warning);
}

/* Meta-tekst (labels, timestamps, "Sidste pris-tjek: 12 min siden") */
.meta {
  font-size: var(--font-size-meta);
  color: var(--color-text-secondary);
}

/* Hierarki-klasser */
.heading-display {
  font-size: var(--font-size-display);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-tight);
  letter-spacing: var(--letter-spacing-tight);
}
.heading-h2 {
  font-size: var(--font-size-heading);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-tight);
  letter-spacing: var(--letter-spacing-tight);
}
.heading-h3 {
  font-size: var(--font-size-subheading);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-tight);
}

/* Hairline divider — eneste tilladte separator */
.divider {
  height: 1px;
  background: var(--color-line);
  border: none;
  margin: 0;
}

/* =============================================================================
   ACCESSIBILITY
   ============================================================================= */
@media (prefers-reduced-motion: reduce) {
  :root {
    --motion-fast: 0ms;
    --motion-base: 0ms;
  }
  * {
    animation-duration: 0ms !important;
    transition-duration: 0ms !important;
  }
}

/* Fokus-ring — synlig på keyboard-nav. Bruger lime fordi det matcher accent. */
:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}