/* ==========================================================================
   tokens.css  ·  GTA-portalens temalager  ·  KANONISK DISTILLATION v1
   GTA OS Designs 2026-09-08 (ersätter arkitektens interimsdistillation
   2026-07-29, som flaggade att den kanoniska versionen ägs av oss).

   KÄLLA: design-system/valv/D-softglass/2026-07-07-operations.html, :root
   och html[data-theme="light"]. Det är aktiv yta i ACTIVE-VIEWS operations
   och aktivt designsystem enligt valv/manifest.js. Värdena är KOPIERADE
   därifrån, inte uppfunna. Kriteriet SK-04 prövar att varje tokennamn i
   mockupens :root finns här, i båda temana.

   TVÅ LAGER, som förr:
   1. KANONISKA tokens: designsystemets egna namn, ordagrant ur källan.
      Mörkt tema på :root, ljust på html[data-theme="light"]. Temat sätts
      före första målningen av skriptet i index.html (nyckel gta-theme,
      samma som mockuperna) och växlas av themeToggle i headern.
   2. BRYGGA: appens äldre namn (--ink-primary, --radius-lg m.fl.) mappade
      mot lager 1, så att vyer byggda före skalet fortsätter fungera.
      Nya vyer använder de kanoniska namnen direkt; bryggan tas bort den
      dag ingen refererar den.

   F11: hex-färger får bara finnas i den här filen.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Sora:wght@400;500;600;700&family=Figtree:wght@400;500;600&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  /* ---- LAGER 1: KANONISKA, ur D-softglass (mörkt) ---- */
  --tint-rgb: 255, 255, 255;
  --shadow-rgb: 0, 0, 0;
  --base: #19191B;

  --glass: rgba(255, 255, 255, .055);
  --glass-strong: rgba(255, 255, 255, .09);
  --glass-hover: rgba(255, 255, 255, .125);
  --card-grad: linear-gradient(160deg, rgba(255, 255, 255, .10), rgba(255, 255, 255, .03) 65%);
  --pill-fill: rgba(255, 255, 255, .045);
  --pill-grad-a: rgba(255, 255, 255, .075);
  --pill-grad-b: rgba(255, 255, 255, .015);

  --line: rgba(255, 255, 255, .12);
  --line-soft: rgba(255, 255, 255, .065);
  --highlight: rgba(255, 255, 255, .22);

  --mint: #5FE9A9;
  --mint-deep: #2FA97A;
  --mint-soft: rgba(95, 233, 169, .16);
  --mint-line: rgba(95, 233, 169, .3);
  --amber: #EEC172;
  --amber-soft: rgba(238, 193, 114, .16);
  --amber-line: rgba(238, 193, 114, .4);
  --coral: #EC705F;
  --coral-soft: rgba(236, 112, 95, .16);
  --violet: #8F8BE6;
  --violet-soft: rgba(143, 139, 230, .16);

  --ink: #F4F7F5;
  --ink-2: #C0C9C4;
  --ink-3: #8B958F;
  --ink-on-accent: #FFFFFF;
  --avatar-grad: linear-gradient(135deg, #8B958F, #5F6A65);
  --tip-bg: rgba(18, 19, 20, .94);
  --tip-line: rgba(255, 255, 255, .12);
  --tip-ink: #F4F7F5;

  --r: 24px;
  --blur: 16px;
  --ease: cubic-bezier(.4, 0, .2, 1);

  --display: 'Sora', system-ui, sans-serif;
  --body: 'Figtree', system-ui, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, monospace;

  --backdrop-top: #232326;
  --backdrop-mid: #1D1D1F;
  --backdrop-bot: #141416;
  --wave-1: #2E2E31;
  --wave-2: #28282B;
  --wave-3: #212123;
  --wave-4: #1A1A1C;
  --vignette-rgb: 0, 0, 0;
  --vignette-a: .4;
  --grain-op: .035;
  --glow-a: rgba(95, 233, 169, .09);
  --glow-b: rgba(95, 233, 169, .05);
  --glow-c: rgba(95, 233, 169, .07);
  --motto-fade: 20, 20, 22;

  /* ---- LAGER 2: BRYGGA till appens äldre tokennamn ----
     Vänster sida är vad äldre kod frågar efter, höger sida är designsystemet. */
  --glass-ds: var(--glass);
  --glass-hover-ds: var(--glass-hover);
  --void: var(--backdrop-bot);
  --surface: var(--glass);
  --surface-raised: var(--glass-strong);
  --glass-border: var(--line);
  --depth: var(--glass-strong);

  --ink-primary: var(--ink);
  --ink-secondary: var(--ink-2);
  --ink-muted: var(--ink-3);

  /* hi = systemaccent (mint), sol = Operations-accent (amber). */
  --hi-400: var(--mint);
  --sol-400: var(--amber);
  --sol-500: var(--amber);

  --status-success: var(--mint);
  --status-warning: var(--amber);
  --status-danger: var(--coral);
  --status-info: var(--violet);
  --status-neutral: var(--ink-3);

  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: var(--r);

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;

  --font-sans: var(--body);
  --font-mono: var(--mono);
}

html[data-theme="light"] {
  --tint-rgb: 22, 28, 24;
  --shadow-rgb: 24, 32, 26;
  --base: #EEF0EA;
  --glass: rgba(22, 28, 24, .04);
  --glass-strong: rgba(22, 28, 24, .07);
  --glass-hover: rgba(22, 28, 24, .10);
  --card-grad: linear-gradient(160deg, rgba(255, 255, 255, .92), rgba(255, 255, 255, .55) 65%);
  --pill-fill: rgba(255, 255, 255, .55);
  --pill-grad-a: rgba(255, 255, 255, .85);
  --pill-grad-b: rgba(255, 255, 255, .35);
  --line: rgba(22, 28, 24, .14);
  --line-soft: rgba(22, 28, 24, .075);
  --highlight: rgba(255, 255, 255, .85);
  --mint: #1E9A6E;
  --mint-deep: #166F52;
  --mint-soft: rgba(30, 154, 110, .14);
  --mint-line: rgba(30, 154, 110, .3);
  --amber: #A06318;
  --amber-soft: rgba(160, 99, 24, .14);
  --amber-line: rgba(160, 99, 24, .4);
  --coral: #C13F2E;
  --coral-soft: rgba(193, 63, 46, .13);
  --violet: #5A5FC0;
  --violet-soft: rgba(90, 95, 192, .14);
  --ink: #141813;
  --ink-2: #48534A;
  --ink-3: #77837A;
  --backdrop-top: #F5F7F1;
  --backdrop-mid: #EDF0E8;
  --backdrop-bot: #E2E6DA;
  --wave-1: #DEE3D6;
  --wave-2: #D3D9CA;
  --wave-3: #C8CFBD;
  --wave-4: #BCC4AF;
  --vignette-rgb: 20, 30, 22;
  --vignette-a: .06;
  --grain-op: .02;
  --glow-a: rgba(30, 154, 110, .07);
  --glow-b: rgba(30, 154, 110, .045);
  --glow-c: rgba(30, 154, 110, .055);
  --motto-fade: 238, 240, 234;
}

/* ==========================================================================
   BASLAGER. Ordagrant ur mockupens body-regel. Skalets egna klasser
   (backdrop, rail, header, modulrad, kort) bor i src/ui/skal/skal.css.
   ========================================================================== */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  color-scheme: dark;
}

html[data-theme="light"] {
  color-scheme: light;
}

body {
  background: var(--base);
  color: var(--ink);
  font-family: var(--body);
  font-size: 14px;
  line-height: 1.5;
  min-height: 100vh;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  transition: background-color .25s var(--ease), color .25s var(--ease);
}

h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 600;
  letter-spacing: -.01em;
}

code, pre, .mono {
  font-family: var(--mono);
}

button, input, select, textarea {
  font: inherit;
  color: inherit;
}

a {
  color: var(--mint);
}

::selection {
  background: var(--mint-soft);
}