/* Tradingsnack uses a neutral grotesque (SF Pro / Helvetica look on the live site).
   No brand font files provided — we use the native system stack for max fidelity.
   No webfont downloads needed. */

/* ============================================
   Tradingsnack — Color tokens
   Light theme. Calm, professional, navy accent.
   Sampled from live site screenshots (juni 2026).
   ============================================ */
:root {
  /* --- Base scale (backgrounds) --- */
  --bg-0: #f2f4f6;            /* page background */
  --bg-1: #ffffff;            /* card / surface */
  --bg-2: #f7f8fa;            /* subtle inset / hover on white */
  --bg-3: #e9edf2;            /* pressed / selected surface */

  /* --- Borders --- */
  --border-1: #e3e7ec;        /* default border */
  --border-2: #cdd5de;        /* hover / focused border */
  --border-accent: #2c517d;   /* highlighted card (e.g. "Mest populär") */

  /* --- Text --- */
  --fg-0: #181d23;            /* near-black headings */
  --fg-1: #343b44;            /* primary body text */
  --fg-2: #6b727e;            /* secondary text */
  --fg-3: #919aa5;            /* muted: eyebrows, meta, placeholders */

  /* --- Accent (navy) --- */
  --accent: #2c517d;          /* buttons, links, checks */
  --accent-hover: #234263;    /* button hover */
  --accent-tile: #3a5a8c;     /* logo tile, caption cards */
  --accent-fg-on: #ffffff;    /* text on accent fills */
  --accent-subtle: #e8edf4;   /* icon chips, tinted backgrounds */
  --accent-subtle-2: #d9e2ee;

  /* --- Semantic (monokrom — endast blått och grått) --- */
  --positive: #2c517d;          /* bekräftelse = navy */
  --positive-subtle: #e8edf4;
  --negative: #445060;          /* fel/avvikelse: mörk gråblå, aldrig rött */
  --negative-subtle: #eceff3;

  /* --- Semantic aliases --- */
  --surface-page: var(--bg-0);
  --surface-card: var(--bg-1);
  --surface-raised: var(--bg-1);
  --text-heading: var(--fg-0);
  --text-body: var(--fg-1);
  --text-secondary: var(--fg-2);
  --text-muted: var(--fg-3);
  --focus-ring: 0 0 0 2px var(--bg-1), 0 0 0 4px var(--accent);
}

/* ============================================
   Tradingsnack — Typography tokens
   System grotesque (SF Pro / Helvetica Neue look)
   ============================================ */
:root {
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-mono: ui-monospace, "SF Mono", Consolas, monospace;

  /* --- Size scale --- */
  --text-xs: 12px;
  --text-sm: 14px;
  --text-base: 16px;
  --text-md: 18px;
  --text-lg: 21px;
  --text-xl: 26px;
  --text-2xl: 34px;
  --text-3xl: 48px;
  --text-4xl: 64px;

  /* --- Weights --- */
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;
  --weight-black: 800;     /* hero headlines */

  /* --- Line heights --- */
  --leading-tight: 1.05;   /* hero display */
  --leading-snug: 1.2;     /* headings */
  --leading-normal: 1.65;  /* body */

  /* --- Letter spacing --- */
  --tracking-display: -0.02em;   /* large headlines */
  --tracking-heading: -0.01em;
  --tracking-body: 0;
  --tracking-caps: 0.14em;       /* uppercase eyebrows/labels */
}

/* ============================================
   Tradingsnack — Spacing, radii, shadows, motion
   ============================================ */
:root {
  /* --- Spacing (4px base) --- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;

  /* --- Radii (soft, generous; buttons are pills) --- */
  --radius-sm: 8px;     /* small chips */
  --radius-md: 12px;    /* icon chips, inputs */
  --radius-lg: 16px;    /* cards */
  --radius-xl: 24px;    /* hero image cards, large panels */
  --radius-full: 999px; /* buttons, badges — pill shape */

  /* --- Shadows (very soft, low contrast) --- */
  --shadow-sm: 0 1px 2px rgba(24, 29, 35, 0.05);
  --shadow-md: 0 4px 16px rgba(24, 29, 35, 0.07);
  --shadow-lg: 0 16px 48px rgba(24, 29, 35, 0.12);

  /* --- Motion (quick, sober; no bounces) --- */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1); /* @kind other */
  --duration-fast: 120ms; /* @kind other */
  --duration-base: 180ms; /* @kind other */
  --duration-slow: 300ms; /* @kind other */
}

/* ============================================
   Tradingsnack — Base element styles
   ============================================ */
* { box-sizing: border-box; }

html {
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body {
  margin: 0;
  background: var(--surface-page);
  color: var(--text-body);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
}

h1, h2, h3, h4 {
  color: var(--text-heading);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-heading);
  line-height: var(--leading-snug);
  margin: 0;
}

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

::selection { background: var(--accent-subtle-2); color: var(--fg-0); }



/* ===== block 2 ===== */


  :root { --radius-xl: 24px; --audit-warn: #9b3d38; }
  * { box-sizing: border-box; }
  html, body { margin: 0; }
  body {
    background: var(--bg-0);
    color: var(--fg-1);
    font-family: var(--font-sans);
    -webkit-font-smoothing: antialiased;
    min-height: 100vh;
  }
  /* Subtilt 120px-rutnät i bakgrunden, som hjälten på sajten */
  .audit-page {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background-image:
      linear-gradient(to right, rgba(44,81,125,0.045) 1px, transparent 1px),
      linear-gradient(to bottom, rgba(44,81,125,0.045) 1px, transparent 1px);
    background-size: 120px 120px;
  }
  .audit-header {
    height: 72px;
    flex: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 28px;
    background: var(--bg-1);
    border-bottom: 1px solid var(--border-1);
  }
  .audit-main {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 48px 20px 64px;
  }
  .audit-rise { animation: auditRise 0.5s var(--ease-out, cubic-bezier(0.16,1,0.3,1)) both; }
  @keyframes auditRise {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
  }
  .audit-bar { transition: width 0.7s var(--ease-out, cubic-bezier(0.16,1,0.3,1)); }
  .audit-spinner {
    width: 38px; height: 38px; border-radius: 50%;
    border: 3px solid var(--bg-3);
    border-top-color: var(--accent);
    animation: auditSpin 0.8s linear infinite;
  }
  @keyframes auditSpin { to { transform: rotate(360deg); } }
  @media (prefers-reduced-motion: reduce) {
    .audit-rise { animation: none; }
    .audit-bar { transition: none; }
  }
  #root { display: flex; flex-direction: column; flex: 1; min-height: 100vh; }

  /* Hopfällbar ”hela analysen” på resultatsidan */
  /* Hopfällbar förklaring på resultatsidan */
  .audit-more { width: 100%; }
  .audit-more > summary {
    list-style: none; cursor: pointer; user-select: none;
    display: inline-flex; align-items: center; gap: 7px; width: max-content;
    font-size: var(--text-sm); font-weight: 600; color: var(--accent);
    transition: opacity var(--duration-base, .2s) var(--ease-out, ease);
  }
  .audit-more > summary:hover { opacity: 0.7; }
  .audit-more > summary::-webkit-details-marker { display: none; }
  .audit-chev { transition: transform .2s ease; font-size: 11px; }
  .audit-more[open] .audit-chev { transform: rotate(180deg); }


/* ========== mindity.se harmonisering ==========
   Audit-appen anpassad till sajtens paper-tema: marinblå accent, monokrom (ingen röd). */
:root{
  --accent: #3f5b8a;
  --accent-hover: #33496e;
  --accent-tile: #3f5b8a;
  --accent-subtle: #eef1f7;
  --accent-subtle-2: #dde4f0;
  --audit-warn: #33496e;        /* "störst brist" markeras med mörkare marinblå, ej röd */
  --bg-0: #f4f5f7;
}

/* Sajtens nav sitter ovanför – appen behöver inte fylla hela höjden själv */
#root{ min-height: auto; }
.audit-page{ min-height: calc(100vh - 132px); background-image: none; }
/* Dölj appens egna mini-header; sajtens riktiga nav används istället */
.audit-header{ display: none; }
.audit-main{ padding: 40px 20px 72px; }