/* YRKLIO tokens — Fas 3 steg 2 (2026-10-09), sex tokens tillagda i migreringens del 5 (2026-10-13). Underlag och beslut: docs/projekt/DESIGN-SYSTEM.md.
   Den enda filen i static/ som får innehålla råa färgvärden (tools/kontrollera-farger.py).
   Länkas först i alla mallar sedan steg 4 (2026-10-09). Filer som ännu inte är migrerade
   definierar fortfarande egna :root-värden och vinner därför över aliasen längst ner.
   Inga textstorlekar, vikter eller radavstånd här ännu: beslut 4, de tas upp med designteamet. */
:root {
  /* Ytor, mörkast först */
  --color-bg: #0d0d10;
  --color-surface-sunken: #111115;
  --color-surface-1: #17171d;
  --color-surface-2: #1d1d24;
  --color-surface-3: #23232b;
  --color-backdrop: rgba(4,4,6,.84);
  --color-overlay-hover: rgba(255,255,255,.03);
  --color-bg-glass: rgba(13,13,16,.92);

  /* Kanter (--color-border = clarity.css, beslut 2) */
  --color-border-subtle: #302c34;
  --color-border: #373239;
  --color-border-strong: #514a54;

  /* Text (--color-text-muted = clarity.css, beslut 2; --color-text: öppen fråga 1) */
  --color-text: #f6f2eb;
  --color-text-soft: #c9c5bf;
  --color-text-muted: #b3aca8;
  --color-text-muted-violet: #aaa1ad;
  --color-text-muted-warm: #99928b;
  --color-text-subtle: #8e8790;
  --color-text-faint: #77717a;

  /* Varumärke: oförändrat. --color-accent gäller även kontosidorna (beslut 1). */
  --color-accent: #d49b63;
  --color-accent-strong: #f0bd87;
  --color-accent-soft: rgba(212,155,99,.12);
  --color-accent-border: #5b4432;
  --color-accent-border-strong: #6d5139;
  --color-accent-text: #dfc39f;
  --color-focus: #f0bd87;
  --color-accent-deep: #b97745;
  --color-accent-edge: #c08352;
  --color-on-accent: #17110c;

  /* Status */
  --color-success: #80b79a;
  --color-success-text: #a8d1b9;
  --color-success-soft: rgba(128,183,154,.12);
  --color-success-border: #355244;
  --color-danger: #d68175;
  --color-danger-text: #dfaaa1;
  --color-danger-soft: rgba(214,129,117,.07);
  --color-danger-border: #65443f;
  --color-danger-border-strong: #754c45;
  --color-info-text: #cdb9e8;
  --color-info-soft: rgba(169,146,216,.08);
  --color-info-border: #514565;

  /* Typsnitt. Inter står först men laddas inte än (beslut 3, eget steg). */
  --font-ui: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: ui-monospace, Consolas, monospace;

  /* CV-papperet: egen grupp, inte gränssnittets färger */
  --cv-font-serif: Georgia, serif;
  --cv-font-sans: Arial, sans-serif;
  --cv-accent-teal: #0e7c76;
  --cv-accent-slate: #344151;
  --cv-accent-plum: #6e487f;
  --cv-accent-rust: #995239;

  /* Avstånd */
  --space-1: 2px;
  --space-2: 4px;
  --space-3: 8px;
  --space-4: 12px;
  --space-5: 16px;
  --space-6: 20px;
  --space-7: 24px;
  --space-8: 32px;
  --space-9: 48px;

  /* Radier */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 22px;
  --radius-pill: 999px;
  --radius-round: 50%;

  /* Skuggor (--shadow-md = clarity.css --shadow, beslut 2) */
  --shadow-sm: 0 5px 16px rgba(0,0,0,.16);
  --shadow-md: 0 12px 32px rgba(0,0,0,.12);
  --shadow-lg: 0 24px 60px rgba(0,0,0,.42);
  --shadow-modal: 0 32px 90px rgba(0,0,0,.6);
  --ring-focus: 0 0 0 3px rgba(212,155,99,.08);

  /* Tredje parts varumärken: Googles inloggningsknapp, mörkt tema (Googles riktlinjer
     för "Sign in with Google"). Används bara av .google-button i account.css. */
  --color-google-surface: #131314;
  --color-google-text: #e3e3e3;
  --color-google-border: #8e918f;
  --color-google-mark-bg: #ffffff;

  /* Layout */
  --layout-sidebar: 252px;

  /* Brytpunkter kan inte vara variabler i @media. Använd: 1100px, 900px, 720px, 520px. */

  /* Gamla namn → tokens (steg 4). Tas bort när ingen fil använder dem längre. */
  --bg: var(--color-bg);
  --surface: var(--color-surface-1);
  --surface2: var(--color-surface-2);
  --surface3: var(--color-surface-3);
  --border: var(--color-border);
  --line: var(--color-border);
  --text: var(--color-text);
  --muted: var(--color-text-muted);
  --accent: var(--color-accent);
  --accent2: var(--color-accent-strong);
  --accentSoft: var(--color-accent-soft);
  --green: var(--color-success);
  --greenSoft: var(--color-success-soft);
  --red: var(--color-danger);
  --shadow: var(--shadow-md);
  --brand: var(--color-accent);
  --brand2: var(--color-accent-strong);
  --brandSoft: var(--color-accent-soft);
  --ux-focus: var(--color-focus);
  --ux-radius: var(--radius-lg);
  --ux-sidebar: var(--layout-sidebar);
}