/* ============================================================
   tokens.css · itm8 App Factory
   Designtokens (--af-*) för ljust och mörkt läge.
   Purpurtonerna är itm8:s officiella: Purple #5F259F, tint 75/50/25 % =
   #7E52B2 / #9F7EC6 / #BEA9D8. Green #64D9A4. Neutrala ytor och statusfärger
   följer specifikationen avsnitt 7.2.

   Temat väljs så här:
     1. <html data-theme="light|dark"> (cookien af-theme, satt av js/theme.js)
     2. annars systemets inställning (prefers-color-scheme)
   Mörkt läge finns därför två gånger nedan (media query + attribut).
   ============================================================ */

:root{
  --af-success-bg:#1F7A4D;--af-success-bg-hover:#19653F;--af-success-fg:#FFFFFF;
  color-scheme:light;

  /* Ytor */
  --af-bg:#F6F4F1;
  --af-surface:#FFFFFF;
  --af-head-row:#FAF8F6;
  --af-border:#DCD3E6;
  --af-divider:#E9E3F0;
  --af-input-border:#D9D1E3;

  /* Text */
  --af-text:#1D1426;
  --af-muted:#5E5669;

  /* Varumärke */
  --af-header:#5F259F;
  --af-header-fg:#FFFFFF;
  --af-primary-bg:#5F259F;
  --af-primary-fg:#FFFFFF;
  --af-accent:#BEA9D8;
  --af-link:#5F259F;
  --af-icon-bg:#EFE8F8;
  --af-icon-fg:#5F259F;
  --af-focus:#5F259F;

  /* Chips, kod, anteckningar */
  --af-chip-bg:#F3F0F6;
  --af-chip-text:#3A3342;
  --af-code-bg:#1D1426;
  --af-code-fg:#EDE6F5;
  --af-note-bg:#FBF6E9;

  /* Meddelanderutor */
  --af-info-bg:#E4EDF8;   --af-info-fg:#1C4680;
  --af-warn-bg:#FFF1DC;   --af-warn-fg:#7A4A00;
  --af-ok-bg:#E3F2E9;     --af-ok-fg:#1F5E3E;
  --af-err-bg:#FBE6E4;    --af-err-fg:#9A231C;

  /* Statuspiller */
  --af-pill-neutral-bg:#EEEBF1;  --af-pill-neutral-fg:#4A4453;
  --af-pill-busy-bg:#EFE8F8;     --af-pill-busy-fg:#5F259F;
  --af-pill-ok-bg:#E3F2E9;       --af-pill-ok-fg:#1F5E3E;
  --af-pill-err-bg:#FBE6E4;      --af-pill-err-fg:#9A231C;
  --af-pill-info-bg:#E4EDF8;     --af-pill-info-fg:#1C4680;
  --af-pill-warn-bg:#FFF1DC;     --af-pill-warn-fg:#7A4A00;

  /* Räknarbadge i sidhuvudet */
  --af-badge-bg:#F3C98A;
  --af-badge-fg:#3A2400;

  /* Diagram och nyckeltal */
  --af-bar:#7E52B2;
  --af-metric:#5F259F;

  /* Kontrast och liv: sidhuvudets gradient, varumärkeslinjen lila->grönt, ett svagt lila sken bakom sidan,
     skugga på korten och grönt för klara steg. */
  --af-green:#64D9A4;
  --af-step-done-bg:#64D9A4;
  --af-step-done-fg:#0D3B27;
  --af-header-grad:linear-gradient(100deg,#5F259F 0%,#4D1C88 55%,#36115F 100%);
  --af-accent-line:linear-gradient(90deg,#7E52B2 0%,#9F7EC6 45%,#64D9A4 100%);
  --af-shadow-card:0 1px 2px rgba(29,20,38,.05),0 6px 20px rgba(29,20,38,.06);
  --af-hover-tint:rgba(29,20,38,.08);

  /* Toast, overlay, skuggor */
  --af-toast-check:#64D9A4;
  --af-overlay:rgba(12,4,20,.6);
  --af-shadow-pop:0 12px 32px rgba(29,20,38,.22);
  --af-shadow-dialog:0 24px 64px rgba(12,4,20,.35);

  /* Form */
  --af-radius-card:16px;
  --af-radius-dialog:20px;
  --af-radius-btn:8px;
  --af-radius-btn-lg:14px;
  --af-radius-field:10px;

  --af-font:'Figtree',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --af-mono:ui-monospace,Menlo,Consolas,monospace;
}

@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --af-success-bg:#64D9A4;--af-success-bg-hover:#7FE3B5;--af-success-fg:#0B2A1D;
    color-scheme:dark;

    --af-bg:#120919;
    --af-surface:#22172E;
    --af-head-row:#1C1226;
    --af-border:#3B2D4B;
    --af-divider:#31253F;
    --af-input-border:#4B3B5D;

    --af-text:#F1ECF6;
    --af-muted:#BDB2CB;

    --af-header:#1B0E27;
    --af-primary-bg:#BEA9D8;
    --af-primary-fg:#1D0A2E;
    --af-link:#BEA9D8;
    --af-icon-bg:#2E1F40;
    --af-icon-fg:#BEA9D8;
    --af-focus:#BEA9D8;

    --af-chip-bg:#31253E;
    --af-chip-text:#DDD3E8;
    --af-code-bg:#0C0612;
    --af-code-fg:#DDD3E8;
    --af-note-bg:#2A2230;

    --af-info-bg:#1B2E4A;   --af-info-fg:#B9D3F5;
    --af-warn-bg:#3A2A12;   --af-warn-fg:#F3C98A;
    --af-ok-bg:#173828;     --af-ok-fg:#A3E0BD;
    --af-err-bg:#45201D;    --af-err-fg:#F6B1AA;

    --af-pill-neutral-bg:#2E2837;  --af-pill-neutral-fg:#CFC8D8;
    --af-pill-busy-bg:#34214A;     --af-pill-busy-fg:#DCC8F7;
    --af-pill-ok-bg:#123B2A;       --af-pill-ok-fg:#7FE3B5;
    --af-pill-err-bg:#45201D;      --af-pill-err-fg:#F6B1AA;
    --af-pill-info-bg:#1B2E4A;     --af-pill-info-fg:#B1CEF4;
    --af-pill-warn-bg:#3A2A12;     --af-pill-warn-fg:#F3C98A;

    --af-badge-bg:#F3C98A;
    --af-badge-fg:#3A2400;

    --af-bar:#9F7EC6;
    --af-metric:#D7C6EE;
    --af-step-done-bg:#64D9A4;
    --af-step-done-fg:#0D3B27;
    --af-header-grad:linear-gradient(100deg,#2E1249 0%,#200D35 55%,#170A26 100%);
    --af-shadow-card:inset 0 1px 0 rgba(255,255,255,.04),0 10px 30px rgba(0,0,0,.35);
    --af-hover-tint:rgba(255,255,255,.12);
    --af-shadow-pop:0 12px 32px rgba(0,0,0,.55);
    --af-shadow-dialog:0 24px 64px rgba(0,0,0,.6);
  }
}

:root[data-theme="dark"]{
  --af-success-bg:#64D9A4;--af-success-bg-hover:#7FE3B5;--af-success-fg:#0B2A1D;
  color-scheme:dark;

  --af-bg:#120919;
  --af-surface:#22172E;
  --af-head-row:#1C1226;
  --af-border:#3B2D4B;
  --af-divider:#31253F;
  --af-input-border:#4B3B5D;

  --af-text:#F1ECF6;
  --af-muted:#BDB2CB;

  --af-header:#1B0E27;
  --af-primary-bg:#BEA9D8;
  --af-primary-fg:#1D0A2E;
  --af-link:#BEA9D8;
  --af-icon-bg:#2E1F40;
  --af-icon-fg:#BEA9D8;
  --af-focus:#BEA9D8;

  --af-chip-bg:#31253E;
  --af-chip-text:#DDD3E8;
  --af-code-bg:#0C0612;
  --af-code-fg:#DDD3E8;
  --af-note-bg:#2A2230;

  --af-info-bg:#1B2E4A;   --af-info-fg:#B9D3F5;
  --af-warn-bg:#3A2A12;   --af-warn-fg:#F3C98A;
  --af-ok-bg:#173828;     --af-ok-fg:#A3E0BD;
  --af-err-bg:#45201D;    --af-err-fg:#F6B1AA;

  --af-pill-neutral-bg:#2E2837;  --af-pill-neutral-fg:#CFC8D8;
  --af-pill-busy-bg:#34214A;     --af-pill-busy-fg:#DCC8F7;
  --af-pill-ok-bg:#123B2A;       --af-pill-ok-fg:#7FE3B5;
  --af-pill-err-bg:#45201D;      --af-pill-err-fg:#F6B1AA;
  --af-pill-info-bg:#1B2E4A;     --af-pill-info-fg:#B1CEF4;
  --af-pill-warn-bg:#3A2A12;     --af-pill-warn-fg:#F3C98A;

  --af-badge-bg:#F3C98A;
  --af-badge-fg:#3A2400;

  --af-bar:#9F7EC6;
  --af-metric:#D7C6EE;
  --af-step-done-bg:#64D9A4;
  --af-step-done-fg:#0D3B27;
  --af-header-grad:linear-gradient(100deg,#2E1249 0%,#200D35 55%,#170A26 100%);
  --af-shadow-card:inset 0 1px 0 rgba(255,255,255,.04),0 10px 30px rgba(0,0,0,.35);
  --af-hover-tint:rgba(255,255,255,.12);
  --af-shadow-pop:0 12px 32px rgba(0,0,0,.55);
  --af-shadow-dialog:0 24px 64px rgba(0,0,0,.6);
}