/*
 * Design-tokens: alle farver, skrifter, størrelser og lag samlet ét sted.
 * Komponenter bruger kun disse variabler, aldrig faste farver.
 *
 * Brudpunkt: 640px (mobil). CSS-variabler kan ikke bruges i media queries,
 * så tallet står direkte i hver fil og skal rettes alle steder, hvis det ændres.
 */

:root {
  /* Farver, lyst tema */
  --color-ground: #e9ecf2;
  --color-surface: #fff;
  --color-surface-2: #f3f5f9;
  --color-ink: #1b2333;
  --color-ink-2: #5b6478;
  --color-line: #d9dee8;
  --color-accent: #2f6df6;
  --color-accent-ink: #fff;
  --color-glass: rgb(255 255 255 / 72%);
  --color-danger: #e5484d;
  --color-on-danger: #fff;
  --color-on-icon: #fff;
  --color-frame: #fff;
  --color-titlebar-active: #dce6ff;
  --color-titlebar-active-ink: #14306e;
  --color-titlebar-inactive-ink: #8a93a6;
  --color-wallpaper-a: #c9d6ff;
  --color-wallpaper-b: #ffd9c7;
  --color-wallpaper-c: #bfeee0;
  --shadow-raised: 0 18px 50px -12px rgb(20 30 60 / 35%), 0 2px 6px rgb(20 30 60 / 12%);

  /* Skrifter */
  --font-display: 'Bricolage Grotesque', ui-sans-serif, system-ui, sans-serif;
  --font-body: 'Figtree', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'Menlo', 'Consolas', monospace;
  --font-size-base: 14px;

  /* Former */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 22px;
  --radius-pill: 999px;

  /* Faste mål */
  --rail-width: 72px;
  --taskbar-height: 52px;

  /* Lag (z-index) */
  --z-widgets: 1;
  --z-dock: 9000;
  --z-launcher: 9500;
  --z-menu: 9800;
  --z-toast: 9900;

  /* Sikre kanter på telefoner med notch */
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
}

/* Mørkt tema: følger systemet, medmindre brugeren har valgt lyst. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    --color-ground: #0f1320;
    --color-surface: #1a2032;
    --color-surface-2: #222a3f;
    --color-ink: #e7ebf5;
    --color-ink-2: #9aa3b8;
    --color-line: #2e3750;
    --color-accent: #6f9bff;
    --color-accent-ink: #0b1020;
    --color-titlebar-active: #263c73;
    --color-titlebar-active-ink: #e3ebff;
    --color-titlebar-inactive-ink: #6f7891;
    --color-glass: rgb(22 28 44 / 72%);
    --color-wallpaper-a: #23336b;
    --color-wallpaper-b: #5a2e3f;
    --color-wallpaper-c: #14524a;
    --shadow-raised: 0 18px 50px -12px rgb(0 0 0 / 70%), 0 2px 6px rgb(0 0 0 / 40%);

    color-scheme: dark;
  }
}

/* Mørkt tema valgt af brugeren. Samme værdier som ovenfor. */
:root[data-theme='dark'] {
  --color-ground: #0f1320;
  --color-surface: #1a2032;
  --color-surface-2: #222a3f;
  --color-ink: #e7ebf5;
  --color-ink-2: #9aa3b8;
  --color-line: #2e3750;
  --color-accent: #6f9bff;
  --color-accent-ink: #0b1020;
  --color-titlebar-active: #263c73;
  --color-titlebar-active-ink: #e3ebff;
  --color-titlebar-inactive-ink: #6f7891;
  --color-glass: rgb(22 28 44 / 72%);
  --color-wallpaper-a: #23336b;
  --color-wallpaper-b: #5a2e3f;
  --color-wallpaper-c: #14524a;
  --shadow-raised: 0 18px 50px -12px rgb(0 0 0 / 70%), 0 2px 6px rgb(0 0 0 / 40%);

  color-scheme: dark;
}

/* Proceslinje-layoutet har ingen rail. */
:root[data-layout='bar'] {
  --rail-width: 0px;
}

@media (width <= 640px) {
  :root {
    --rail-width: 0px;
  }
}