/*
 * CoolHost design-tokens som CSS-variabler (offentlig hjemmeside).
 * Spejler design/tokens.json og panel/src/styles/tokens.css, så brandet er identisk.
 * Tema-aware: OS-præference via prefers-color-scheme + manuel override via data-theme på :root.
 * Elementer må KUN referere disse variabler – aldrig rå hex-værdier.
 */

:root {
  /* brand */
  --brand: #1F6BFF;
  --brand-deep: #1B4FE0;
  --brand-bright: #4C8DFF;
  --brand-soft: #E7F0FF;

  /* neutraler (blå-tonede) */
  --ink: #0C1730;
  --muted: #5B6B8C;
  --faint: #8797B4;
  --line: #DCE6FA;
  --line-2: #CBD9F5;
  --surface: #FFFFFF;
  --surface-2: #F5F8FF;
  --surface-3: #E9F0FF;
  --bg: #EEF3FE;

  /* semantiske (kun status) */
  --ok: #12A150;        --ok-soft: #E1F5EA;
  --warn: #C77700;      --warn-soft: #FBEFD8;
  --crit: #E23D3D;      --crit-soft: #FBE3E3;

  /* typografi */
  --font-sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, "SF Mono", "Cascadia Mono", "Segoe UI Mono", Menlo, Consolas, monospace;

  /* radius / spacing / skygger */
  --r-sm: 8px;  --r: 14px;  --r-lg: 22px;
  --shadow: 0 1px 2px rgba(16,40,90,.06), 0 10px 30px rgba(20,60,150,.08);
  --shadow-lg: 0 4px 12px rgba(16,40,90,.10), 0 24px 60px rgba(20,60,150,.16);
}

/* --- mørk tilstand: følger OS, medmindre data-theme overstyrer --- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --brand: #4C8DFF;
    --brand-deep: #2E6BFF;
    --brand-bright: #79ABFF;
    --brand-soft: #15264A;

    --ink: #EAF1FF;
    --muted: #9BABCB;
    --faint: #6E7FA1;
    --line: #1E2C48;
    --line-2: #27395C;
    --surface: #0E1728;
    --surface-2: #121D33;
    --surface-3: #17233D;
    --bg: #070C18;

    --ok: #3DD07E;   --ok-soft: #0F2A1E;
    --warn: #E6A23C; --warn-soft: #2C2312;
    --crit: #FF6B6B; --crit-soft: #2E1518;

    --shadow: 0 1px 2px rgba(0,0,0,.4), 0 10px 30px rgba(0,0,0,.35);
    --shadow-lg: 0 6px 16px rgba(0,0,0,.45), 0 30px 70px rgba(0,0,0,.55);
  }
}

/* --- eksplicit valgt tema (vinder altid over media query) --- */
:root[data-theme="dark"] {
  --brand: #4C8DFF;
  --brand-deep: #2E6BFF;
  --brand-bright: #79ABFF;
  --brand-soft: #15264A;

  --ink: #EAF1FF;
  --muted: #9BABCB;
  --faint: #6E7FA1;
  --line: #1E2C48;
  --line-2: #27395C;
  --surface: #0E1728;
  --surface-2: #121D33;
  --surface-3: #17233D;
  --bg: #070C18;

  --ok: #3DD07E;   --ok-soft: #0F2A1E;
  --warn: #E6A23C; --warn-soft: #2C2312;
  --crit: #FF6B6B; --crit-soft: #2E1518;

  --shadow: 0 1px 2px rgba(0,0,0,.4), 0 10px 30px rgba(0,0,0,.35);
  --shadow-lg: 0 6px 16px rgba(0,0,0,.45), 0 30px 70px rgba(0,0,0,.55);
}

:root[data-theme="light"] {
  --brand: #1F6BFF;
  --brand-deep: #1B4FE0;
  --brand-bright: #4C8DFF;
  --brand-soft: #E7F0FF;

  --ink: #0C1730;
  --muted: #5B6B8C;
  --faint: #8797B4;
  --line: #DCE6FA;
  --line-2: #CBD9F5;
  --surface: #FFFFFF;
  --surface-2: #F5F8FF;
  --surface-3: #E9F0FF;
  --bg: #EEF3FE;

  --ok: #12A150;   --ok-soft: #E1F5EA;
  --warn: #C77700; --warn-soft: #FBEFD8;
  --crit: #E23D3D; --crit-soft: #FBE3E3;

  --shadow: 0 1px 2px rgba(16,40,90,.06), 0 10px 30px rgba(20,60,150,.08);
  --shadow-lg: 0 4px 12px rgba(16,40,90,.10), 0 24px 60px rgba(20,60,150,.16);
}