/*
  Design-tokens for Teknologiforståelse.
  Alt farve, typografi og spacing samles her, så resten af CSS'en
  aldrig indeholder "magiske" værdier.
*/

:root {
  /* --- Grundfarver --- */
  --navy-950: #060b18;
  --navy-900: #0b1226;
  --navy-800: #121a34;
  --navy-700: #1a2545;
  --navy-600: #263356;

  --paper-0: #ffffff;
  --paper-50: #f6f7fb;
  --paper-100: #eceff6;
  --paper-200: #dde2ee;

  /* --- Accentfarver (bruges konsekvent, sparsomt pr. skærmbillede) --- */
  --turkis-500: #17c3b2;
  --turkis-600: #0fa89a;
  --turkis-100: #d8f6f1;

  --violet-500: #8b6bf0;
  --violet-600: #7250e0;
  --violet-100: #ece6fd;

  --gul-500: #ffb703;
  --gul-600: #ea9c00;
  --gul-100: #fff2d6;

  --koral-500: #ff6f59;
  --koral-600: #ec5238;
  --koral-100: #ffe1db;

  /* --- Kompetenceområder (bruges som faste "temafarver") --- */
  --komp-myndiggoerelse: var(--turkis-500);
  --komp-design: var(--violet-500);
  --komp-computationel: var(--gul-500);
  --komp-handleevne: var(--koral-500);

  /* --- Semantiske roller (lys tilstand som standard) --- */
  --bg-page: var(--paper-50);
  --bg-surface: var(--paper-0);
  --bg-surface-muted: var(--paper-100);
  --bg-inverse: var(--navy-900);

  --text-primary: var(--navy-950);
  --text-secondary: #40485f;
  --text-muted: #6b7386;
  --text-on-inverse: var(--paper-50);
  --text-on-accent: var(--navy-950);

  --border-subtle: var(--paper-200);
  --border-strong: #c3cadd;

  --focus-ring: var(--koral-600);
  --link-color: var(--turkis-600);

  --shadow-sm: 0 1px 2px rgba(6, 11, 24, 0.06), 0 1px 1px rgba(6, 11, 24, 0.04);
  --shadow-md: 0 8px 24px rgba(6, 11, 24, 0.10), 0 2px 6px rgba(6, 11, 24, 0.06);
  --shadow-lg: 0 20px 48px rgba(6, 11, 24, 0.16), 0 4px 12px rgba(6, 11, 24, 0.08);

  /* --- Typografi --- */
  --font-sans: "Segoe UI", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;

  --fs-100: 0.8125rem;
  --fs-200: 0.9375rem;
  --fs-300: 1.0625rem;
  --fs-400: 1.25rem;
  --fs-500: 1.6rem;
  --fs-600: 2.1rem;
  --fs-700: 2.8rem;
  --fs-800: 3.6rem;

  --lh-tight: 1.15;
  --lh-snug: 1.35;
  --lh-normal: 1.6;

  /* --- Spacing (8px-skala) --- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-9: 6rem;

  /* --- Diverse --- */
  --radius-sm: 10px;
  --radius-md: 18px;
  --radius-lg: 28px;
  --radius-pill: 999px;

  --measure: 68ch;
  --content-width: 1180px;

  --duration-fast: 120ms;
  --duration-base: 220ms;
  --ease-standard: cubic-bezier(0.2, 0.65, 0.3, 1);
}

/* Mørkt tema følger systemets indstilling */
@media (prefers-color-scheme: dark) {
  :root {
    --bg-page: var(--navy-950);
    --bg-surface: var(--navy-900);
    --bg-surface-muted: var(--navy-800);
    --bg-inverse: var(--paper-0);

    --text-primary: #f3f5fb;
    --text-secondary: #c3cadd;
    --text-muted: #8b93ab;
    --text-on-inverse: var(--navy-950);
    --text-on-accent: var(--navy-950);

    --border-subtle: var(--navy-700);
    --border-strong: var(--navy-600);

    --link-color: var(--turkis-500);

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.35);
    --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.45);
    --shadow-lg: 0 20px 48px rgba(0, 0, 0, 0.55);
  }
}

/* Manuel theme-override, hvis der senere tilføjes en switcher */
:root[data-theme="dark"] {
  --bg-page: var(--navy-950);
  --bg-surface: var(--navy-900);
  --bg-surface-muted: var(--navy-800);
  --bg-inverse: var(--paper-0);
  --text-primary: #f3f5fb;
  --text-secondary: #c3cadd;
  --text-muted: #8b93ab;
  --text-on-inverse: var(--navy-950);
  --border-subtle: var(--navy-700);
  --border-strong: var(--navy-600);
  --link-color: var(--turkis-500);
}
:root[data-theme="light"] {
  --bg-page: var(--paper-50);
  --bg-surface: var(--paper-0);
  --bg-surface-muted: var(--paper-100);
  --bg-inverse: var(--navy-900);
  --text-primary: var(--navy-950);
  --text-secondary: #40485f;
  --text-muted: #6b7386;
  --text-on-inverse: var(--paper-50);
  --border-subtle: var(--paper-200);
  --border-strong: #c3cadd;
  --link-color: var(--turkis-600);
}