/* Genererad av webb/tema/generera.py - redigera inte för hand. Ankare #CE142D.
   Komponenter använder bara de semantiska variablerna (--farg-*, --status-*).
   Hex är värdet; OKLCH-kommentaren är källan. */

:root {
  color-scheme: light;

  /* Primär: ankarets kulörton, bara ljusheten varierar */
  --primar-50: #fff4f3;  /* oklch(97.50% 0.0122 23.28) */
  --primar-100: #ffe6e4;  /* oklch(94.50% 0.0274 23.28) */
  --primar-200: #ffcfcb;  /* oklch(89.50% 0.0547 23.28) */
  --primar-300: #ffaaa5;  /* oklch(82.00% 0.1008 23.28) */
  --primar-400: #ff7775;  /* oklch(73.00% 0.1662 23.28) */
  --primar-500: #f1424a;  /* oklch(64.00% 0.2111 23.28) */
  --primar-600: #ce142d;  /* oklch(54.30% 0.2111 23.28) */
  --primar-700: #ac0020;  /* oklch(47.00% 0.1898 23.28) */
  --primar-800: #8a0018;  /* oklch(40.00% 0.1615 23.28) */
  --primar-900: #6a0010;  /* oklch(33.00% 0.1333 23.28) */
  --primar-950: #4b0008;  /* oklch(26.00% 0.1050 23.28) */

  /* Sekundär (hallon, −30°) och tertiär (plommon, −60°) */
  --hallon-50: #fff3f7;  /* oklch(97.50% 0.0139 353.28) */
  --hallon-100: #ffe5ee;  /* oklch(94.50% 0.0314 353.28) */
  --hallon-200: #ffcce0;  /* oklch(89.50% 0.0628 353.28) */
  --hallon-300: #ffa4ca;  /* oklch(82.00% 0.1162 353.28) */
  --hallon-400: #f675b0;  /* oklch(73.00% 0.1689 353.28) */
  --hallon-500: #d65994;  /* oklch(64.00% 0.1689 353.28) */
  --hallon-600: #b53a77;  /* oklch(54.30% 0.1689 353.28) */
  --hallon-700: #9c2062;  /* oklch(47.00% 0.1689 353.28) */
  --hallon-800: #83004f;  /* oklch(40.00% 0.1651 353.28) */
  --hallon-900: #64003b;  /* oklch(33.00% 0.1362 353.28) */
  --hallon-950: #470028;  /* oklch(26.00% 0.1073 353.28) */
  --plommon-50: #fef2ff;  /* oklch(97.50% 0.0206 323.28) */
  --plommon-100: #fde3ff;  /* oklch(94.50% 0.0459 323.28) */
  --plommon-200: #fac9ff;  /* oklch(89.50% 0.0897 323.28) */
  --plommon-300: #eca8f3;  /* oklch(82.00% 0.1266 323.28) */
  --plommon-400: #ce8bd5;  /* oklch(73.00% 0.1266 323.28) */
  --plommon-500: #b170b8;  /* oklch(64.00% 0.1266 323.28) */
  --plommon-600: #925399;  /* oklch(54.30% 0.1266 323.28) */
  --plommon-700: #7c3e83;  /* oklch(47.00% 0.1266 323.28) */
  --plommon-800: #672a6e;  /* oklch(40.00% 0.1266 323.28) */
  --plommon-900: #52155a;  /* oklch(33.00% 0.1266 323.28) */
  --plommon-950: #3e0045;  /* oklch(26.00% 0.1227 323.28) */

  /* Neutral: ankarets kulörton, chroma 0,004–0,012 - aldrig rent grått */
  --neutral-0: #fffdfd;  /* oklch(99.50% 0.0024 23.28) */
  --neutral-50: #fcf8f7;  /* oklch(98.20% 0.0050 23.28) */
  --neutral-100: #f6f1f0;  /* oklch(96.20% 0.0060 23.28) */
  --neutral-200: #ebe4e4;  /* oklch(92.50% 0.0070 23.28) */
  --neutral-300: #d9d2d2;  /* oklch(87.00% 0.0080 23.28) */
  --neutral-400: #978e8e;  /* oklch(65.50% 0.0100 23.28) */
  --neutral-500: #7f7676;  /* oklch(57.50% 0.0110 23.28) */
  --neutral-600: #6a6160;  /* oklch(50.00% 0.0120 23.28) */
  --neutral-700: #4e4545;  /* oklch(40.00% 0.0120 23.28) */
  --neutral-800: #362e2d;  /* oklch(31.00% 0.0120 23.28) */
  --neutral-900: #221b1a;  /* oklch(23.00% 0.0120 23.28) */
  --neutral-950: #140e0d;  /* oklch(17.00% 0.0100 23.28) */

  /* Status, ljust tema */
  --lyckad-bakgrund: #e3fbe8;  /* oklch(96.50% 0.0350 152.00) */
  --lyckad-kant: #b4e8c0;  /* oklch(88.50% 0.0770 152.00) */
  --lyckad-accent: #219c54;  /* oklch(61.25% 0.1500 152.00) */
  --lyckad-text: #0a763c;  /* oklch(49.75% 0.1275 152.00) */
  --varning-bakgrund: #fff1e4;  /* oklch(96.50% 0.0226 63.28) */
  --varning-kant: #ffcfa3;  /* oklch(88.50% 0.0788 63.28) */
  --varning-accent: #c67400;  /* oklch(63.50% 0.1445 63.28) */
  --varning-text: #965600;  /* oklch(51.75% 0.1178 63.28) */
  --fel-bakgrund: #fff0ec;  /* oklch(96.50% 0.0174 31.28) */
  --fel-kant: #ffcbc1;  /* oklch(88.50% 0.0611 31.28) */
  --fel-accent: #e65943;  /* oklch(64.50% 0.1800 31.28) */
  --fel-text: #b13e2d;  /* oklch(52.50% 0.1530 31.28) */
  --info-bakgrund: #ebf5ff;  /* oklch(96.50% 0.0170 252.00) */
  --info-kant: #bedcff;  /* oklch(88.50% 0.0578 252.00) */
  --info-accent: #478bd3;  /* oklch(62.50% 0.1300 252.00) */
  --info-text: #3168a3;  /* oklch(51.00% 0.1105 252.00) */

  /* Gradienter: OKLCH med låst kulörton och uttrycklig mittpunkt; hex-stopp som reserv */
  --gradient-primar: linear-gradient(135deg, #ff7775, #ef5d5d, #df3f45, #ce142d, #b70d26, #a0051f, #8a0018);
  --gradient-primar-oklch: linear-gradient(135deg in oklch, oklch(73.00% 0.1662 23.28), oklch(54.30% 0.2111 23.28) 50%, oklch(40.00% 0.1615 23.28));
  --gradient-mjuk: linear-gradient(135deg, #fff4f3, #ffefee, #ffebe9, #ffe6e4, #ffdfdc, #ffd7d4, #ffcfcb);
  --gradient-mjuk-oklch: linear-gradient(135deg in oklch, oklch(97.50% 0.0122 23.28), oklch(94.50% 0.0274 23.28) 50%, oklch(89.50% 0.0547 23.28));

  /* Semantiska variabler - det komponenterna använder */
  --farg-bakgrund: var(--neutral-50);
  --farg-yta: var(--neutral-0);
  --farg-yta-sankt: var(--neutral-100);
  --farg-kant: var(--neutral-200);
  --farg-kant-stark: var(--neutral-400);
  --farg-text: var(--neutral-900);
  --farg-text-dampad: var(--neutral-600);
  --farg-text-inverterad: var(--neutral-0);
  --farg-varumarke: var(--primar-600);
  --farg-varumarke-mjuk: var(--primar-50);
  --farg-varumarke-text: var(--primar-700);
  --farg-lank: var(--primar-700);
  --farg-lank-hover: var(--primar-800);
  --farg-fokus: var(--primar-500);
  --farg-atgard: var(--neutral-900);
  --farg-atgard-hover: var(--neutral-800);
  --farg-atgard-text: var(--neutral-0);
  --farg-meny: var(--neutral-950);
  --farg-meny-text: var(--neutral-200);
  --farg-meny-aktiv: var(--neutral-800);
  --status-lyckad-bakgrund: var(--lyckad-bakgrund);
  --status-lyckad-kant: var(--lyckad-kant);
  --status-lyckad-accent: var(--lyckad-accent);
  --status-lyckad-text: var(--lyckad-text);
  --status-varning-bakgrund: var(--varning-bakgrund);
  --status-varning-kant: var(--varning-kant);
  --status-varning-accent: var(--varning-accent);
  --status-varning-text: var(--varning-text);
  --status-fel-bakgrund: var(--fel-bakgrund);
  --status-fel-kant: var(--fel-kant);
  --status-fel-accent: var(--fel-accent);
  --status-fel-text: var(--fel-text);
  --status-info-bakgrund: var(--info-bakgrund);
  --status-info-kant: var(--info-kant);
  --status-info-accent: var(--info-accent);
  --status-info-text: var(--info-text);
}

@supports (background: linear-gradient(in oklch, red, blue)) {
  :root {
    --gradient-primar: var(--gradient-primar-oklch);
    --gradient-mjuk: var(--gradient-mjuk-oklch);
  }
}