/* ripa design tokens – tre utseenden (Granit, Blå himmel, Snöblind)
   Användning: <html data-theme="g|b|s"> eller data-theme="auto" (följer telefonen: ljust = Snöblind, mörkt = Granit).
   Genererat från prototypen 2026-11-11. */
:root {
  --ripa-red: #E0342A;
  --ripa-red-dark: #B8251D;
  --ripa-font-display: "Barlow Condensed", system-ui, sans-serif;
  --ripa-font-text: "Inter", system-ui, sans-serif;
  --ripa-radius-card: 22px;
  --ripa-radius-pill: 999px;
  --ripa-space: 8px;
  /* EAWS farogradsfärger 1–5 */
  --ripa-danger-1: #CCFF66; --ripa-danger-2: #FFFF00; --ripa-danger-3: #FF9900; --ripa-danger-4: #FF0000; --ripa-danger-5: #7A0000;
  /* Branthet */
  --ripa-steep-30: #F2D33A; --ripa-steep-35: #F08A24; --ripa-steep-40: #E0342A; --ripa-steep-45: #8E1F4A;
}
/* Granit – mörkt */
[data-theme="g"] {
  --bg: #171E22;
  --card: #212B31;
  --cardbd: #2E3A41;
  --ink: #FFFFFF;
  --text: #E6ECEE;
  --mut: #A2AFB6;
  --line: #2E3A41;
  --soft: #2A353C;
  --hdr: #1F292E;
  --hdrmut: #AEBAC0;
  --front: #171E22;
  --acc: #93D2E6;
  --accfill: #93D2E6;
  --accsoft: #22343C;
  --warm: #F2B26B;
  --warmfill: #F2B26B;
  --warmsoft: #2E2A26;
  --btn: #E6ECEE;
  --btnink: #171E22;
  --nav: #1B2327;
  --navoff: #97A4AB;
  --chipbd: #3A4850;
  --m1: #34444C;
  --m2: #2A383F;
  --snow: #E3EBEE;
  --snowedge: #93D2E6;
  --track: #2E3A41;
  --input: #212B31;
  --sh: none;
  --glass: rgba(23,30,34,0.94);
  --glassbd: #3A4850;
  --exbg: #3A3417;
  --exink: #FFE58A;
  --hdrink: #FFFFFF;
  --hdrbtn: rgba(255,255,255,0.08);
  --hdrbtnbd: rgba(255,255,255,0.16);
  --l1: #2B383F;
  --l2: #37474F;
  --l3: #465961;
  --cap: #D9E3E7;
  --sun: #F3DDB4;
  --sunop: 0.8;
  --starop: 0;
  --moonop: 0;
  --recbg: #2A353C;
  --avbg: #E6ECEE;
  --avink: #171E22;
}
/* Blå himmel – färg */
[data-theme="b"] {
  --bg: #F2F5F7;
  --card: #FFFFFF;
  --cardbd: #E1E7EC;
  --ink: #12202C;
  --text: #16232E;
  --mut: #566572;
  --line: #E1E7EC;
  --soft: #EAF0F4;
  --hdr: #336EA0;
  --hdrmut: #E3EEF7;
  --front: #F2F5F7;
  --acc: #1F6FA8;
  --accfill: #3E8FD0;
  --accsoft: #E2EFF9;
  --warm: #9A4A12;
  --warmfill: #F08A24;
  --warmsoft: #FDEEE0;
  --btn: #12202C;
  --btnink: #FFFFFF;
  --nav: #FFFFFF;
  --navoff: #566572;
  --chipbd: #CED8E0;
  --m1: #5C7F9C;
  --m2: #46647D;
  --snow: #FFFFFF;
  --snowedge: #8FC8EE;
  --track: #E1E7EC;
  --input: #FFFFFF;
  --sh: 0 8px 24px rgba(18,32,44,0.07);
  --glass: rgba(255,255,255,0.96);
  --glassbd: rgba(18,32,44,0.10);
  --exbg: #FFF4C2;
  --exink: #6B5200;
  --hdrink: #FFFFFF;
  --hdrbtn: rgba(255,255,255,0.18);
  --hdrbtnbd: rgba(255,255,255,0.35);
  --l1: #7FA6C8;
  --l2: #5A7E9C;
  --l3: #41607A;
  --cap: #FFFFFF;
  --sun: #FFD27A;
  --sunop: 1;
  --starop: 0;
  --moonop: 0;
  --recbg: #12202C;
  --avbg: #FFFFFF;
  --avink: #12202C;
}
/* Snöblind – ljust */
[data-theme="s"] {
  --bg: #F6F8F9;
  --card: #FFFFFF;
  --cardbd: #E1E7EC;
  --ink: #0E1A24;
  --text: #15212B;
  --mut: #56636E;
  --line: #E1E7EC;
  --soft: #EEF2F5;
  --hdr: #FFFFFF;
  --hdrmut: #56636E;
  --front: #F6F8F9;
  --acc: #1F6FA8;
  --accfill: #2E8FD6;
  --accsoft: #E4F0FA;
  --warm: #9A4A12;
  --warmfill: #F08A24;
  --warmsoft: #FDEEE0;
  --btn: #0E1A24;
  --btnink: #FFFFFF;
  --nav: #FFFFFF;
  --navoff: #56636E;
  --chipbd: #CED8E0;
  --m1: #A9B9C6;
  --m2: #8FA2B2;
  --snow: #FFFFFF;
  --snowedge: #8FC8EE;
  --track: #E1E7EC;
  --input: #FFFFFF;
  --sh: 0 8px 24px rgba(14,26,36,0.07);
  --glass: rgba(255,255,255,0.97);
  --glassbd: rgba(14,26,36,0.10);
  --exbg: #FFF4C2;
  --exink: #6B5200;
  --hdrink: #0E1A24;
  --hdrbtn: #EEF2F5;
  --hdrbtnbd: #DCE3E9;
  --l1: #E6ECF1;
  --l2: #CBD6DF;
  --l3: #AFC0CD;
  --cap: #FFFFFF;
  --sun: #F2B26B;
  --sunop: 1;
  --starop: 0;
  --moonop: 0;
  --recbg: #0E1A24;
  --avbg: #0E1A24;
  --avink: #FFFFFF;
}
/* Auto: följer telefonens läge */
@media (prefers-color-scheme: light) {
  [data-theme="auto"] {
    --bg: #F6F8F9;
    --card: #FFFFFF;
    --cardbd: #E1E7EC;
    --ink: #0E1A24;
    --text: #15212B;
    --mut: #56636E;
    --line: #E1E7EC;
    --soft: #EEF2F5;
    --hdr: #FFFFFF;
    --hdrmut: #56636E;
    --front: #F6F8F9;
    --acc: #1F6FA8;
    --accfill: #2E8FD6;
    --accsoft: #E4F0FA;
    --warm: #9A4A12;
    --warmfill: #F08A24;
    --warmsoft: #FDEEE0;
    --btn: #0E1A24;
    --btnink: #FFFFFF;
    --nav: #FFFFFF;
    --navoff: #56636E;
    --chipbd: #CED8E0;
    --m1: #A9B9C6;
    --m2: #8FA2B2;
    --snow: #FFFFFF;
    --snowedge: #8FC8EE;
    --track: #E1E7EC;
    --input: #FFFFFF;
    --sh: 0 8px 24px rgba(14,26,36,0.07);
    --glass: rgba(255,255,255,0.97);
    --glassbd: rgba(14,26,36,0.10);
    --exbg: #FFF4C2;
    --exink: #6B5200;
    --hdrink: #0E1A24;
    --hdrbtn: #EEF2F5;
    --hdrbtnbd: #DCE3E9;
    --l1: #E6ECF1;
    --l2: #CBD6DF;
    --l3: #AFC0CD;
    --cap: #FFFFFF;
    --sun: #F2B26B;
    --sunop: 1;
    --starop: 0;
    --moonop: 0;
    --recbg: #0E1A24;
    --avbg: #0E1A24;
    --avink: #FFFFFF;
  }
}
@media (prefers-color-scheme: dark) {
  [data-theme="auto"] {
    --bg: #171E22;
    --card: #212B31;
    --cardbd: #2E3A41;
    --ink: #FFFFFF;
    --text: #E6ECEE;
    --mut: #A2AFB6;
    --line: #2E3A41;
    --soft: #2A353C;
    --hdr: #1F292E;
    --hdrmut: #AEBAC0;
    --front: #171E22;
    --acc: #93D2E6;
    --accfill: #93D2E6;
    --accsoft: #22343C;
    --warm: #F2B26B;
    --warmfill: #F2B26B;
    --warmsoft: #2E2A26;
    --btn: #E6ECEE;
    --btnink: #171E22;
    --nav: #1B2327;
    --navoff: #97A4AB;
    --chipbd: #3A4850;
    --m1: #34444C;
    --m2: #2A383F;
    --snow: #E3EBEE;
    --snowedge: #93D2E6;
    --track: #2E3A41;
    --input: #212B31;
    --sh: none;
    --glass: rgba(23,30,34,0.94);
    --glassbd: #3A4850;
    --exbg: #3A3417;
    --exink: #FFE58A;
    --hdrink: #FFFFFF;
    --hdrbtn: rgba(255,255,255,0.08);
    --hdrbtnbd: rgba(255,255,255,0.16);
    --l1: #2B383F;
    --l2: #37474F;
    --l3: #465961;
    --cap: #D9E3E7;
    --sun: #F3DDB4;
    --sunop: 0.8;
    --starop: 0;
    --moonop: 0;
    --recbg: #2A353C;
    --avbg: #E6ECEE;
    --avink: #171E22;
  }
}

/* Typografi */
.ripa-display { font-family: var(--ripa-font-display); font-weight: 700; text-transform: uppercase; line-height: .95; color: var(--ink); }
.ripa-kicker  { font-family: var(--ripa-font-text); font-size: 11.5px; font-weight: 700; letter-spacing: .08em; color: var(--mut); }
.ripa-card    { background: var(--card); border: 1px solid var(--cardbd); border-radius: var(--ripa-radius-card); padding: 18px; box-shadow: var(--sh); }