/* Blueprint — designspråket som variabler (DESIGN-sprak-och-canvas.md §6).
   Ljust och mörkt följer telefonen (V19). De gamla namnen från v1–v4.1 finns kvar som alias,
   så dagens CSS i index.html byter utseende utan att logiken rörs. */
:root{
  color-scheme: light dark;
  --bg:#F7F6F3; --yta:#FFFFFF; --yta2:#F0EFEB; --yta3:#E8E6E0; --yta-glas:rgba(255,255,255,.80);
  --text:#1E2126; --mjuk:#62666D; --svag:#A3A6AB; --linje:#E4E2DC;
  --accent:#2F6F8F; --accent-ljus:#E6F0F4; --pa-accent:#FFFFFF;          /* lugn havsblå, huvudknappar */
  --violett:#7B61E8; --violett-ljus:#F1EDFD; --violett-kant:#C9BCF5; --violett-text:#5B43C4;   /* bara AI */
  --gron:#3E8E6B; --gron-ljus:#E7F3EC;                                    /* klart */
  --varm:#C9832E; --varm-ljus:#FBF1E3; --varm-text:#8A5A1C;               /* påbörjat */
  --rod:#C2554B; --rod-ljus:#FBEAE7;                                      /* blockerar, sparsamt */
  --lager-ser:#EAF2F8; --lager-gor:#EDF4EE; --lager-sparas:#F8F2E6; --lager-bakom:#EEF0F4;
  --duk-bg:#FBFAF8; --pil:#9A9DA3; --scrim:rgba(30,33,38,.32);
  --skugga-1:0 1px 2px rgba(30,33,38,.05),0 2px 8px rgba(30,33,38,.05);
  --skugga-2:0 2px 6px rgba(30,33,38,.06),0 10px 28px rgba(30,33,38,.08);
  --skugga-ark:0 -4px 30px rgba(30,33,38,.12);

  /* Typografi: systemets typsnitt, inget laddas */
  --typsnitt:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Roboto,system-ui,sans-serif;
  --f-stor:700 32px/38px var(--typsnitt);
  --f-rubrik:600 22px/28px var(--typsnitt);
  --f-under:600 17px/24px var(--typsnitt);
  --f-brod:400 17px/25px var(--typsnitt);
  --f-liten:400 15px/21px var(--typsnitt);
  --f-fot:500 13px/18px var(--typsnitt);

  /* Former och avstånd (8-punkts rutnät) */
  --r-s:10px; --r-m:14px; --r-l:20px; --r-ark:28px; --r-rund:999px;
  --a1:4px; --a2:8px; --a3:12px; --a4:16px; --a5:24px; --a6:32px; --a7:48px;
  --sida:16px; --tryck:44px; --topp-h:60px; --flik-h:58px;

  /* Rörelse */
  --e-mjuk:cubic-bezier(.2,.8,.2,1); --e-ark:cubic-bezier(.32,.72,0,1);
  --t-snabb:160ms; --t-normal:260ms; --t-ark:380ms; --t-andas:2400ms;

  /* Safe areas (ios-pwa-kvalitet §1). Provet sätter dem i headless. */
  --sat:env(safe-area-inset-top,0px); --sab:env(safe-area-inset-bottom,0px); --sal:env(safe-area-inset-left,0px); --sar:env(safe-area-inset-right,0px);

  /* Alias: gamla namn → nya värden */
  --band0:var(--lager-ser); --band1:var(--lager-gor); --band2:var(--lager-sparas); --band3:var(--lager-bakom);
  --skugga:var(--skugga-1);
  --radie:var(--r-s); --radie-stor:var(--r-l); --rund:var(--r-rund); --rum:var(--a2);
  --spB:320px;
  --steg-gra:var(--yta2); --steg-gul:var(--varm-ljus); --steg-gul-kant:var(--varm); --steg-gron:var(--gron-ljus); --steg-gron-kant:var(--gron);
  --scen:var(--accent); --scen-ljus:var(--accent-ljus); --nej-bg:var(--yta2); --nej-kant:var(--linje);
}
@media (prefers-color-scheme: dark){ :root:not([data-tema="ljust"]){
  --bg:#141517; --yta:#1D1F22; --yta2:#26282C; --yta3:#303237; --yta-glas:rgba(29,31,34,.82);
  --text:#ECEBE8; --mjuk:#A3A6AB; --svag:#6E7177; --linje:#2F3236;
  --accent:#7FB4CE; --accent-ljus:#1E2E36; --pa-accent:#0E1A20;
  --violett:#A493F5; --violett-ljus:#26223A; --violett-kant:#4A3F7A; --violett-text:#C3B8FA;
  --gron:#7CC4A0; --gron-ljus:#1C2C24; --varm:#E0A85C; --varm-ljus:#2E2518; --varm-text:#E8BC80; --rod:#E58A80; --rod-ljus:#33201E;
  --lager-ser:#1A232A; --lager-gor:#1B241E; --lager-sparas:#29241B; --lager-bakom:#1F2126;
  --duk-bg:#17181A; --pil:#7A7D83; --scrim:rgba(0,0,0,.55);
  --skugga-1:0 1px 2px rgba(0,0,0,.4); --skugga-2:0 6px 24px rgba(0,0,0,.45); --skugga-ark:0 -4px 30px rgba(0,0,0,.5);
}}
:root[data-tema="morkt"]{
  --bg:#141517; --yta:#1D1F22; --yta2:#26282C; --yta3:#303237; --yta-glas:rgba(29,31,34,.82);
  --text:#ECEBE8; --mjuk:#A3A6AB; --svag:#6E7177; --linje:#2F3236;
  --accent:#7FB4CE; --accent-ljus:#1E2E36; --pa-accent:#0E1A20;
  --violett:#A493F5; --violett-ljus:#26223A; --violett-kant:#4A3F7A; --violett-text:#C3B8FA;
  --gron:#7CC4A0; --gron-ljus:#1C2C24; --varm:#E0A85C; --varm-ljus:#2E2518; --varm-text:#E8BC80; --rod:#E58A80; --rod-ljus:#33201E;
  --lager-ser:#1A232A; --lager-gor:#1B241E; --lager-sparas:#29241B; --lager-bakom:#1F2126;
  --duk-bg:#17181A; --pil:#7A7D83; --scrim:rgba(0,0,0,.55);
  --skugga-1:0 1px 2px rgba(0,0,0,.4); --skugga-2:0 6px 24px rgba(0,0,0,.45); --skugga-ark:0 -4px 30px rgba(0,0,0,.5);
}
@media (prefers-reduced-motion: reduce){
  :root{ --t-normal:0ms; --t-ark:0ms; }
  *,*::before,*::after{ animation-duration:1ms !important; animation-iteration-count:1 !important; scroll-behavior:auto !important; }
}
html{ -webkit-text-size-adjust:100%; text-size-adjust:100%; }