/* =========================================================================
   chrille.nu - Designtokens
   Enda stället där råa färger och typsnitt får förekomma. Allt annat i temat
   refererar variabler härifrån. Hämtade ur Claude Design-skissen
   "Chrille.nu UI mockup", turn 4a-6b.
   ========================================================================= */

:root {
  /* --- Grönskalan, sajtens ryggrad --------------------------------------- */
  --c-green-100: #d0e6a5;   /* ljusast, terminaltext och planschens botten */
  --c-green-200: #cfdcb8;
  --c-green-300: #c2cbb0;
  --c-green-400: #a9b499;
  --c-green-500: #a5cc74;   /* terminalens brödtext */
  --c-green-600: #9db87a;
  --c-green-700: #7ea24e;
  --c-green-800: #69a032;   /* primär, länkar och knappar */
  --c-green-900: #5c8a2c;
  --c-green-950: #3f5a1c;
  --c-green-1000: #2c4318;

  /* --- Mörka bottnar ------------------------------------------------------ */
  --c-ink-900: #0d110a;     /* terminalsvart */
  --c-ink-800: #12160e;     /* sajtens mörka skal */
  --c-ink-700: #1c2415;     /* huvudbokens botten */
  --c-ink-600: #3d4a2c;
  --c-ink-500: #4d5643;
  --c-ink-400: #6d7a5c;
  /* Dämpad mossgrön för terminalen. Skissens #6d7a5c landar på 4.17:1 mot
     terminalsvart och faller under AA för brödtext. Den här ligger på
     5.19:1 och är knappt urskiljbar från originalet. */
  --c-moss: #7d8a6a;

  /* --- Ljusa bottnar ------------------------------------------------------ */
  --c-paper: #f2f3ea;       /* plansch och huvudbokens papper */
  --c-paper-warm: #f4f3ea;
  --c-white: #ffffff;

  /* --- Neutralt och larm -------------------------------------------------- */
  --c-grey-500: #8a8a86;    /* monitorns metadata */
  --c-grey-700: #555555;
  --c-grey-900: #111111;
  --c-alarm: #c8321e;       /* vårdens larmfärg, aldrig dekorativ */

  /* --- Typsnitt ----------------------------------------------------------- */
  --f-sans: 'Space Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --f-mono: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', Consolas, monospace;
  --f-serif: 'Source Serif 4', Georgia, 'Times New Roman', serif;

  /* --- Typografisk skala -------------------------------------------------- */
  --t-label: 500 10.5px/1.4 var(--f-mono);      /* 01/04, LARM: PÅ */
  --t-meta: 500 11px/1.4 var(--f-mono);
  --t-small: 400 13px/1.5 var(--f-sans);
  --t-body: 400 16px/1.65 var(--f-sans);
  --t-lead: 400 19px/1.6 var(--f-sans);
  --t-h3: 600 21px/1.25 var(--f-sans);
  --t-h2: 700 34px/1.15 var(--f-serif);
  --t-h1: 700 54px/1.05 var(--f-serif);
  --t-display: 700 72px/1 var(--f-serif);

  /* --- Rytm --------------------------------------------------------------- */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;
  --s-7: 44px;
  --s-8: 64px;
  --s-9: 96px;

  --wrap: 1240px;           /* skissens desktopbredd */
  --wrap-text: 720px;       /* läsbredd för brödtext */

  --radius-sm: 4px;
  --radius: 8px;
  --radius-pill: 999px;

  --line-soft: 1px solid rgba(208, 230, 165, .14);
  --line-hard: 1px solid rgba(18, 22, 14, .12);

  /* --- Rörelse ------------------------------------------------------------ */
  --ease: cubic-bezier(.22, .61, .36, 1);
  --dur: 220ms;

  /* =======================================================================
     Områdesslottar. Varje universum skriver om dessa, resten av temat läser
     bara dem. Det är det som gör att en och samma komponent kan bo i fyra
     utseenden utan att dupliceras.
     ======================================================================= */
  --u-bg: var(--c-ink-800);
  --u-surface: var(--c-ink-700);
  --u-text: var(--c-green-300);
  --u-text-dim: var(--c-ink-400);
  --u-accent: var(--c-green-800);
  --u-line: rgba(208, 230, 165, .14);
  --u-heading-font: var(--f-serif);
  --u-label-font: var(--f-mono);
  --u-id: '00/04';
}

@media (prefers-reduced-motion: reduce) {
  :root { --dur: 0ms; }
}