/*
 * Börsfakta – designtokens. Design B "Registret" (vald 2026-10-01, se
 * _docs/design-b-registret.md).
 *
 * ALL visuell identitet bor här: färger, typsnitt, storlekar, radavstånd,
 * spaltbredd, radier. css/bas.css använder bara variablerna. Byt design =
 * byt värden här (och typsnittslänken i mall/layout.php).
 */

:root {
  /* --- Färger (ljust läge) ---------------------------------------------- */
  --bg: #EEF1F3;              /* sidbakgrund */
  --yta: #FFFFFF;             /* kort */
  --yta-dampad: #F4F6F7;      /* tabellhuvud */
  --ram: #D5DADF;             /* kortram, avdelare */
  --ram-svag: #EBEEF0;        /* tabellrader */
  --text: #1A1D21;
  --text-2: #3B4249;          /* sekundär text */
  --text-3: #5A626B;          /* etiketter, källrader */
  --topp: #1A1D21;            /* header/footer */
  --topp-text: #FFFFFF;
  --topp-text-dampad: #A9B1B9;
  --topp-falt: #2A2F35;       /* sökfält i header */
  --topp-ram: #2F353C;
  --accent: #E8590C;          /* logoruta, aktiva markeringar */
  --accent-text: #1A1D21;
  --lank: #B4410F;
  --lank-hover: #8A300A;
  --upp: #B4410F;             /* ökning – alltid med tecken + */
  --ned: #2F5D8A;             /* minskning – alltid med tecken − */
  --neutral: #5A626B;
  --serie: #2F5D8A;           /* linjer, sparklines, staplar */
  --serie-2: #E8590C;
  --serie-3: #6F8FAF;
  --serie-4: #1A1D21;
  --rutnat: #EBEEF0;
  --referens: #8A9199;
  --serie-yta: rgba(47, 93, 138, 0.10);
  --oppen: #1F7A4D;           /* "börsen öppen"-prick */
  --stangd: #8A9199;
  --plupp-1: #A7E3BB;
  --plupp-2: #F8DC75;
  --plupp-3: #F5AAAA;
  --plupp-text: #1A1D21;
  --dialog-bakgrund: rgba(0, 0, 0, 0.6);
  --varning-bg: #FFF4EC;      /* rådgivningsrutan */
  --varning-ram: #F0C3A3;
  --ok-bg: #E8F5EC;           /* lyckad åtgärd, t.ex. skickat formulär */
  --ok-ram: #8FCBA3;
  --ok-text: #14532D;
  --fel-bg: #FDECEC;          /* fel i formulär */
  --fel-ram: #E8A3A3;
  --fel-text: #8A1C1C;
  --markering: #FFE8D6;
  --fokus: #E8590C;

  /* Rädsla & girighet-skalan (blå → mörk → orange) */
  --fg-1: #2F5D8A;
  --fg-2: #6F8FAF;
  --fg-3: #1A1D21;
  --fg-4: #E9A177;
  --fg-5: #E8590C;

  /* --- Typsnitt --------------------------------------------------------- */
  --typsnitt: "Public Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --typsnitt-rubrik: var(--typsnitt);
  --typsnitt-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;

  --vikt-normal: 400;
  --vikt-medel: 500;
  --vikt-halvfet: 600;
  --vikt-fet: 700;
  --vikt-extrafet: 800;

  --storlek-xs: 0.75rem;      /* 12 px: källrader, tabellhuvud */
  --storlek-s: 0.875rem;      /* 14 px: tabeller, nav */
  --storlek-m: 1rem;          /* 16 px: brödtext, korttitlar */
  --storlek-l: 1.125rem;
  --storlek-h1: clamp(1.75rem, 1.4rem + 1.2vw, 2.125rem);   /* 28 → 34 px */
  --storlek-h2: clamp(1.3rem, 1.15rem + 0.6vw, 1.5rem);
  --storlek-h3: 1.125rem;
  --storlek-kort-titel: 1rem;
  --storlek-kpi: clamp(1.5rem, 1rem + 2vw, 2.5rem);         /* 24 → 40 px */
  --h1-spatiering: -0.02em;

  --radavstand: 1.6;
  --radavstand-rubrik: 1.2;
  --radavstand-tat: 1.4;

  /* --- Mått ------------------------------------------------------------- */
  --spaltbredd: 46rem;
  --sidbredd: 80rem;
  --kantmarginal: 1rem;       /* 16 px mobil */
  --kantmarginal-bred: 3rem;  /* 48 px desktop */
  --topp-hojd: 3.5rem;        /* 56 px mobil */
  --topp-hojd-bred: 4rem;     /* 64 px desktop */
  --mellanrum-xs: 0.25rem;
  --mellanrum-s: 0.5rem;
  --mellanrum-m: 1rem;
  --mellanrum-l: 1.5rem;
  --mellanrum-xl: 2.5rem;
  --kort-padding: 0.875rem;   /* 14 px mobil, 18 px desktop */
  --cell-padding-y: 0.625rem; /* 10 px */
  --cell-padding-x: 0.875rem; /* 14 px mobil, 18 px desktop */

  --radie: 0;                 /* raka hörn överallt */
  --kantlinje: 1px;
  --skugga: none;

  --annons-hojd: 280px;       /* reserverad höjd när annonser är aktiva (ingen CLS) */
}

@media (min-width: 48rem) {
  :root {
    --kort-padding: 1.125rem;
    --cell-padding-x: 1.125rem;
  }
}

/* --- Mörkt läge ---------------------------------------------------------- */
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="ljust"]) {
    --bg: #121417;
    --yta: #1A1E23;
    --yta-dampad: #20252B;
    --ram: #2C333B;
    --ram-svag: #252B32;
    --text: #E6E9EC;
    --text-2: #C3C9CF;
    --text-3: #9AA3AC;
    --topp: #0B0D0F;
    --topp-falt: #1E2329;
    --topp-ram: #23282E;
    --lank: #F08A4B;
    --lank-hover: #F6A877;
    --upp: #F08A4B;
    --ned: #7FA8D4;
    --neutral: #9AA3AC;
    --serie: #7FA8D4;
    --serie-3: #4F7193;
    --serie-4: #E6E9EC;
    --rutnat: #252B32;
    --referens: #6B747D;
    --serie-yta: rgba(127, 168, 212, 0.14);
    --oppen: #3DBA7E;
    --stangd: #6B747D;
    --plupp-1: #79C998;
    --plupp-2: #EAC65B;
    --plupp-3: #E89595;
    --varning-bg: #2A1F17;
    --varning-ram: #6B4128;
    --ok-bg: #13291C; --ok-ram: #2F6B45; --ok-text: #A7E3BB;
    --fel-bg: #2E1414; --fel-ram: #7A3030; --fel-text: #F5AAAA;
    --markering: #4A2C17;
    --fg-3: #E6E9EC;
  }
}
:root[data-tema="morkt"] {
  --plupp-1: #79C998; --plupp-2: #EAC65B; --plupp-3: #E89595;
  --bg: #121417; --yta: #1A1E23; --yta-dampad: #20252B; --ram: #2C333B; --ram-svag: #252B32;
  --text: #E6E9EC; --text-2: #C3C9CF; --text-3: #9AA3AC; --topp: #0B0D0F; --topp-falt: #1E2329; --topp-ram: #23282E;
  --lank: #F08A4B; --lank-hover: #F6A877; --upp: #F08A4B; --ned: #7FA8D4; --neutral: #9AA3AC;
  --serie: #7FA8D4; --serie-3: #4F7193; --serie-4: #E6E9EC; --rutnat: #252B32; --referens: #6B747D;
  --serie-yta: rgba(127, 168, 212, 0.14); --oppen: #3DBA7E; --stangd: #6B747D;
  --varning-bg: #2A1F17; --varning-ram: #6B4128;
  --ok-bg: #13291C; --ok-ram: #2F6B45; --ok-text: #A7E3BB;
  --fel-bg: #2E1414; --fel-ram: #7A3030; --fel-text: #F5AAAA; --markering: #4A2C17; --fg-3: #E6E9EC;
}