/*
  tokens.css
  Ordet er Frit, Grafikgenerator. Laast designfundament.

  Denne fil er den eneste kilde til brandets farver, skrifter og afstande.
  Vaerdierne her maa ikke overskrives af brugeren i UI. Aarsindstillinger,
  logoopsaetning, spornavne og sporfarver kan ikke aendres af den frivillige.

  Håndhævede regler i den færdige renderer og preflight:
    1. En sporfarve fylder normalt under 10 procent af opslaget.
    2. Farve er aldrig eneste sporindikator. Altid farve plus navn plus ikon.
    3. Det smaa (okker) bruger altid blaeksort tekst, aldrig hvid.
    4. Paa Det smaa-opslag bruges Signalgul ikke som ekstra accent.
    5. Logoet skifter aldrig farve efter spor.
*/

/* Lokale, OFL-licenserede variable webfonte. Ingen netvaerkskilde i drift. */
@font-face {
  font-family: "Fraunces";
  src: url("../assets/fonts/Fraunces-Variable.ttf") format("truetype-variations");
  font-weight: 100 900;
  font-stretch: 100%;
  font-style: normal;
  font-display: block;
}

@font-face {
  font-family: "Inter";
  src: url("../assets/fonts/Inter-Variable.ttf") format("truetype-variations");
  font-weight: 100 900;
  font-stretch: 100%;
  font-style: normal;
  font-display: block;
}

:root {
  /* Brandfarver, laast */
  --color-paper:         #FAF7F0;
  --color-ink:           #1C1B19;
  --color-primary:       #2F5D50;
  --color-primary-light: #3d7a69;  /* lysere primaer til hover/active i UI-chrome */
  --color-primary-dark:  #274d43;  /* moerkere primaer til knappe-hover i UI-chrome */
  --color-accent:        #E4B23C;
  --color-accent-light:  #FEF3CB;  /* lys gul til fremhaevning og flash-animation i UI */
  --color-neutral-light: #EFEAE0;
  --color-neutral-dark:  #4A4842;

  /* Statussignaler, kun til UI-chrome, aldrig til canvas */
  --color-status-ok:          #15803d;
  --color-status-ok-bg:       rgba(21, 128, 61, 0.06);
  --color-status-error:       #c62828;
  --color-status-error-bg:    rgba(198, 40, 40, 0.06);
  --color-status-error-dark:  #8e1b1b;
  --color-status-error-border:#d05030;
  --color-status-error-text:  #b02010;

  /* Sporfarver, laast. Aldrig frit valgbare. */
  --track-heard:         #8A4B38;
  --track-power:         #2E5F63;
  --track-small:         #C99A3E;
  --track-without-words: #4C5D4A;

  /* Semantiske aliasser */
  --torvegroen: var(--color-primary);
  --signalgul:  var(--color-accent);

  /* Skrifter. Ingen tredje font. Ingen systemfont-fallback i faerdig grafik. */
  --font-display: "Fraunces", serif;
  --font-body:    "Inter", sans-serif;

  /* Afstandssystem, multipla af 8 pt */
  --space-1: 8px;
  --space-2: 16px;
  --space-3: 24px;
  --space-4: 32px;
  --space-5: 40px;
  --space-6: 48px;
  --space-8: 64px;

  /* Radius og kanter */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --hairline: 1px solid var(--color-neutral-light);

  /* Kontrolflade-typografi */
  --ui-font-size:   15px;
  --ui-line-height: 1.5;
  --ui-label-size:  13px;
  --ui-help-size:   12.5px;

  /* Touch targets, mindst 44x44 px */
  --touch-min: 44px;

  /* Bloed, diskret bevaegelse. Respekterer prefers-reduced-motion nedenfor. */
  --transition-fast: 120ms ease;
  --transition-soft: 220ms ease;

  /* Skygger, diskrete */
  --shadow-panel: 0 1px 2px rgba(28, 27, 25, 0.06), 0 8px 24px rgba(28, 27, 25, 0.06);
  --shadow-card:  0 1px 2px rgba(28, 27, 25, 0.08);

  /* Fokusmarkering, synlig for tastatur */
  --focus-ring: 0 0 0 3px rgba(47, 93, 80, 0.35);

  /* Native lærredsdimensioner til renderer og eksport */
  --canvas-feed-w:  1080;
  --canvas-feed-h:  1350;
  --canvas-story-w: 1080;
  --canvas-story-h: 1920;
}

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