/* Lundqvist Intelligence – färgpalett och grundmått.
   Den enda platsen där färger bestäms. Startsidan, inloggningen och alla verktyg använder bara
   variablerna här. Ny färg behövs? Lägg den här, med en rad om vad den är till för.

   Principer:
   - Mörkt läge är standard och verkligen mörkt: ytor i antracit, ingen vit yta.
   - En enda accentfärg: Lundqvist-grönt från loggan. Den betyder "valt", "i fokus" eller "gör det här".
   - Rött bara för fel. Inga andra färger i gränssnittet; materialfärger i ritningar och ikoner är bilder, inte gränssnitt. */

@font-face {
  font-family: "Atkinson Next";
  src: url("/fonts/atkinson-hyperlegible-next.woff2") format("woff2");
  font-weight: 200 800;
  font-display: swap;
}
@font-face {
  font-family: "Atkinson Mono";
  src: url("/fonts/atkinson-hyperlegible-mono.woff2") format("woff2");
  font-weight: 200 800;
  font-display: swap;
}

:root {
  /* Ytor, mörkast först */
  --bg: #0e0f11;          /* sidans botten */
  --bg-lamp: #1c1e22;     /* botten där ljuset faller i sidans topp */
  --panel: #16181b;       /* paneler: sökrutan, listor, steg */
  --raised: #1f2226;      /* fält och val inuti en panel */
  --hover: #272b30;       /* det man pekar på */
  --line: #2a2e33;        /* tunna linjer och kanter */
  --line-strong: #3a3f46; /* tydligare kanter, streckade platshållare */

  /* Text */
  --text: #f1f3f5;        /* rubriker och det viktiga */
  --text-2: #a7afb8;      /* brödtext och förklaringar */
  --text-3: #6d7680;      /* det minst viktiga: antal, inaktivt */

  /* Accent: Lundqvist-grön, den enda färgen */
  --accent: #00ba77;
  --accent-hover: #1fd08f;
  --accent-text: #2fd69a;               /* grön text på mörk yta */
  --on-accent: #03140c;                 /* text på grön yta */
  --accent-soft: rgba(0, 186, 119, 0.13);
  --accent-line: rgba(0, 186, 119, 0.55);
  --glow: 0 0 0 1px var(--accent-line), 0 0 22px rgba(0, 186, 119, 0.22);

  /* Fel */
  --danger: #ff7b6b;

  /* Form och djup */
  --radius: 16px;         /* paneler */
  --radius-sm: 10px;      /* fält, val, knappar */
  --shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 14px 36px rgba(0, 0, 0, 0.45);

  /* Typsnitt */
  --font: "Atkinson Next", "Avenir Next", system-ui, sans-serif;
  --mono: "Atkinson Mono", ui-monospace, Menlo, Consolas, monospace;

  color-scheme: dark;
}

/* Ljust läge (solen i brytaren på startsidan). Samma roller, ljusa ytor. */
:root[data-theme="light"] {
  --bg: #eceef1;
  --bg-lamp: #ffffff;
  --panel: #ffffff;
  --raised: #f3f5f7;
  --hover: #e8ecf0;
  --line: #dde1e6;
  --line-strong: #c3c9d1;

  --text: #121519;
  --text-2: #55606b;
  --text-3: #87909a;

  --accent-text: #00804f;
  --accent-soft: rgba(0, 186, 119, 0.12);
  --glow: 0 0 0 1px var(--accent-line), 0 0 18px rgba(0, 186, 119, 0.18);

  --danger: #c8402f;

  --shadow: 0 1px 2px rgba(16, 24, 40, 0.06), 0 12px 30px rgba(16, 24, 40, 0.08);

  color-scheme: light;
}