/* Brohode tokens v1.3.0 */
:root {
  /* Base – nøytral, svakt varm */
  --n-0: #ffffff;
  --n-50: #f6f6f4;
  --n-100: #f0f0ee;
  --n-200: #e4e4e1;
  --n-300: #cfcfcb;
  --n-350: #c4c4c1;
  --n-400: #a3a3a0;
  --n-500: #737371;
  --n-550: #666664;
  --n-600: #5c5c5a;
  --n-650: #454543;
  --n-700: #3a3a39;
  --n-800: #2a2a29;
  --n-850: #222221;
  --n-900: #1c1c1b;
  --n-950: #161615;

  /* Aksent – rav */
  --amber-300: #f0b878;
  --amber-400: #e39d53;
  --amber-500: #d4883c;
  --amber-600: #b86f2a;
  --amber-700: #8f5520;

  /* Status */
  --green-500: #4f9e6b;
  --green-600: #3f8558;
  --red-500: #d05a4e;
  --red-600: #b2463b;
  --blue-500: #5b7fd6;
  --blue-600: #4766b8;

  /* Semantiske aliaser – lyst tema (default) */
  --bg: #f2f7ef;
  --bg-sunken: #e9efe6;
  --surface: #f9fdf6;
  --surface-2: #f2f7ef;
  --surface-3: #e9efe6;
  --border: #dde4da;
  --border-strong: #c6cfc3;
  --border-hover: #c6cfc3;
  /* Radtilstander (lister, tabeller, navigasjon), lagt over flaten raden ligger på.
     Valgt er alltid tydeligere enn hover (scripts/sjekk-tokens.mjs). */
  --row-hover: rgba(26,26,25,0.035);
  --row-selected: rgba(26,26,25,0.07);
  --nav-hover: var(--row-hover); /* beholdt fra v1.2.0, bruk --row-hover */
  --text: #1a1a19;
  --text-2: var(--n-650);
  --text-3: var(--n-550);
  --text-inverse: var(--n-0);

  /* Lenker – aldri rav */
  --link: var(--text);
  --link-underline: var(--text-3);
  --link-hover-underline: var(--text); /* ikke i bruk fra v1.3.0: understreken forsvinner ved hover */

  /* Små indikatorer (prikker, merker, tellere) – aldri rav */
  --indicator: var(--text-3);

  /* Rav – kun aktiv indikator og warning */
  --accent: var(--amber-500);
  --accent-hover: var(--amber-600);
  --accent-soft: #fbefe0;
  --accent-text: var(--amber-700);

  --primary: #1a1a19;
  --primary-hover: var(--n-700);
  --primary-text: var(--n-0);

  /* Systemkontroller: avkrysning, radio, bryter, slider */
  --control: var(--primary);
  --control-text: var(--primary-text);
  --control-off: var(--border-strong);

  --success: var(--green-500);
  --success-soft: #e6f2ea;
  --success-text: #2f6b47;
  --success-border: #b9dcc5;
  --warning: var(--amber-500);
  --warning-soft: #fbefe0;
  --warning-text: #8f5520;
  --warning-border: #f0d4b2;
  --danger: var(--red-500);
  --danger-strong: var(--red-600); /* fylt danger-knapp, hvit tekst ≥ 4,5:1 */
  --on-danger: var(--n-0);        /* tekst på --danger-strong */
  --danger-soft: #f9e6e4;
  --danger-text: #9a3b32;
  --danger-border: #f1c3be;
  --info: var(--blue-500);
  --info-soft: #e7ecf9;
  --info-text: #3a5597;
  --info-border: #c3cfee;
  --neutral: var(--n-500);
  --neutral-soft: #e9efe6;
  --neutral-text: #454543;
  --neutral-border: #c6cfc3;

  --code-bg: #e9efe6;
  --code-text: #2a2a29;
  --code-keyword: var(--info-text);
  --code-string: var(--success-text);
  --code-comment: var(--text-3);
  --disabled-bg: #e9efe6;
  --disabled-text: #a3a3a0;
  --selection: #c9e5d3;          /* tekstmarkering, grønn */
  --selection-inactive: #e2f0e7; /* markering uten fokus */
  --overlay: rgba(22,22,21,0.45);
  --scrim: rgba(22,22,21,0.5);
  --tooltip-bg: #1a1a19;
  --tooltip-text: #f6f6f4;

  /* Fokus. Ring: 2 px avstand + 2 px --text. Sett --focus-gap til flaten komponenten ligger på. */
  --focus-gap: var(--bg);
  --focus-ring: 0 0 0 2px var(--focus-gap), 0 0 0 4px var(--text);
  --focus-outline: 2px solid var(--text);
  --focus-outline-offset: 2px;
  --focus-field-border: var(--text);

  --glow: radial-gradient(60% 40% at 50% 0%, rgba(212,136,60,0.10), transparent 70%);
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
  --shadow-md: 0 4px 16px rgba(0,0,0,0.08);
}

[data-theme="dark"] {
  --bg: #0c1516;
  --bg-sunken: #081011;
  --surface: #131e1f;
  --surface-2: #182627;
  --surface-3: #2a3b3c;
  --border: #223334;
  --border-strong: #2f4345;
  --border-hover: #2f4345;
  --row-hover: rgba(236,236,234,0.05);
  --row-selected: rgba(236,236,234,0.10);
  --text: #ececea;
  --text-2: var(--n-350);
  --text-3: var(--n-400);
  --text-inverse: var(--n-950);

  --accent: var(--amber-400);
  --accent-hover: var(--amber-300);
  --accent-soft: rgba(212,136,60,0.14);
  --accent-text: var(--amber-300);

  --primary: #ececea;
  --primary-hover: var(--n-0);
  --primary-text: var(--n-950);

  --success-soft: rgba(79,158,107,0.16);
  --success-text: #8fd0a8;
  --success-border: #2a4d38;
  --warning: var(--amber-400);
  --warning-soft: rgba(212,136,60,0.16);
  --warning-text: #f0b878;
  --warning-border: #5a3d1c;
  --danger-soft: rgba(208,90,78,0.16);
  --danger-text: #f0a099;
  --danger-border: #5a2b27;
  --info-soft: rgba(91,127,214,0.16);
  --info-text: #a9bdf0;
  --info-border: #2f3d66;
  --neutral-soft: rgba(163,163,160,0.14);
  --neutral-text: #c4c4c1;
  --neutral-border: #2f4345;

  --code-bg: #182627;
  --code-text: #d6d6d3;
  --disabled-bg: #1f2f30;
  --disabled-text: #5c6c6c;
  --selection: rgba(79,158,107,0.38);
  --selection-inactive: rgba(79,158,107,0.20);
  --overlay: rgba(0,0,0,0.6);
  --scrim: rgba(0,0,0,0.6);
  --tooltip-bg: #ececea;
  --tooltip-text: #0c1516;

  /* Aliaser mot tema-avhengige tokens må deklareres på nytt per tema */
  --nav-hover: var(--row-hover);
  --link: var(--text);
  --link-underline: var(--text-3);
  --link-hover-underline: var(--text);
  --indicator: var(--text-3);
  --control: var(--primary);
  --control-text: var(--primary-text);
  --control-off: var(--border-strong);
  --code-keyword: var(--info-text);
  --code-string: var(--success-text);
  --code-comment: var(--text-3);
  --focus-gap: var(--bg);
  --focus-ring: 0 0 0 2px var(--focus-gap), 0 0 0 4px var(--text);
  --focus-outline: 2px solid var(--text);
  --focus-field-border: var(--text);

  --glow: radial-gradient(60% 40% at 50% 0%, rgba(212,136,60,0.16), transparent 70%);
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.4);
  --shadow-md: 0 8px 24px rgba(0,0,0,0.45);
}

::selection { background: var(--selection); color: var(--text); }

/* Nedtrekkspanel: ingen pil, 4–6 px under knappen */
:root { --menu-radius: 10px; --menu-offset: 4px; }

/* Lenker: alltid understrek, den forsvinner ved hover. Tastaturfokus får vanlig outline (under). */
a { color: var(--link); text-decoration: underline; text-decoration-color: var(--link-underline); text-underline-offset: 2px; text-decoration-thickness: 1px; }
a:hover { text-decoration-line: none; }

/* Fokus – web */
:focus-visible { outline: var(--focus-outline); outline-offset: var(--focus-outline-offset); }
input:focus-visible, select:focus-visible, textarea:focus-visible { outline: none; border-color: var(--focus-field-border); }