/* ==========================================================================
   Tokens – the only place raw values live. Everything else uses var(--…).
   Direction: Buffer-inspired (chosen 2026-10-22).
   ========================================================================== */

@font-face {
  font-family: "Outfit";
  src: url("../fonts/outfit-latin-wght-normal.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Figtree";
  src: url("../fonts/figtree-latin-wght-normal.woff2") format("woff2-variations");
  font-weight: 300 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Figtree";
  src: url("../fonts/figtree-latin-wght-italic.woff2") format("woff2-variations");
  font-weight: 300 900;
  font-style: italic;
  font-display: swap;
}

:root {
  /* Type families */
  --font-display: "Outfit", system-ui, sans-serif;
  --font-body: "Figtree", system-ui, sans-serif;
  --track-display: -0.02em;

  /* Type scale */
  --text-xs: 13px;
  --text-sm: 15px;
  --text-md: 18px;
  --text-lg: 20px;
  --title-sm: 22px;
  --title-md: 42px;
  --title-xl: 72px;

  /* Color: surfaces */
  --bg: #fefdfb;
  --surface: #ffffff;
  --surface-soft: #fbfaf6;      /* inset panels inside cards: profile, closed FAQ items */
  --surface-soft-edge: #f0efe8; /* their 1px inset outline */
  --panel-soft: #f4f2ec;        /* big soft page panels (page blocks) */

  /* Charts (validated with the dataviz palette check: emphasis green vs context grey) */
  --chart-accent: #1f7a45;  /* the guide's toplist */
  --chart-context: #bdbcb4; /* everything else; values also in tooltip + table */
  --chart-grid: #ebeae3;
  --chart-off: #c9c8c0;     /* outline of a dot that doesn't qualify */
  --chart-ramp-2: #4ea35f;  /* ordinal ramp, light to dark: #7cc46e, these two, #2f8450 */
  --chart-ramp-4: #1c6238;
  --star: #f2b42c;
  --hover: #e4e3dd;
  --hover-soft: #f3f2ec;
  --line: #e4e3dd;
  --line-strong: #cbcac2;
  --grid-line: #eae9e2;

  /* Color: text */
  --ink: #213130;
  --text-muted: #4a5654;
  --text-desc: #4a4a45;
  --text-subtle: #6e6e68;
  --eyebrow: #337047;

  /* Color: brand */
  --accent: #b0ec9c;
  --accent-hover: #9fe089;
  --accent-ink: #213130;
  --ink-hover: #2f4442;  /* dark buttons */
  --no-bg: #fde4df;      /* "gör inte" marks */
  --no-ink: #b0402f;

  /* Color: inverse (footer) */
  --inverse-bg: #213130;
  --inverse-ink: #fefdfb;
  --inverse-accent: #b0ec9c;
  --inverse-muted: #b9c4c2;
  --inverse-line: #3a4f4d;

  /* Score badge (Toppvald-betyg) */
  --score-bg: #e3f5db;
  --score-ink: #213130;
  --score-icon-color: #3d8a52;

  /* Pastel tones */
  --tone-blue: #addaff;
  --tone-yellow: #ffd88a;
  --tone-coral: #ffb2a8;
  --tone-lilac: #d4c2ff;
  --tone-green: #b0ec9c;
  --tone-pink: #f3bdff;

  /* Shape */
  --radius-pill: 999px;
  --radius-card: 20px;
  --radius-panel: 28px;
  --radius-inner: 10px;
  --radius-sm: 6px;
  --shadow: 0 4px 12px -2px rgba(23, 23, 23, 0.1), 0 0 1px 1px rgba(23, 23, 23, 0.05);
  --shadow-raised: 0 16px 24px -8px rgba(23, 23, 23, 0.1), 0 4px 8px -4px rgba(23, 23, 23, 0.1), 0 0 1px 1px rgba(23, 23, 23, 0.05);
  /* Product cutouts: filter drop-shadows follow the product's shape (transparent images).
     Contact + mid + wide ambient, all faint: a lift, not a visible shadow. */
  --shadow-product:
    drop-shadow(0 1px 1px rgba(23, 23, 23, 0.06))
    drop-shadow(0 4px 6px rgba(23, 23, 23, 0.06))
    drop-shadow(0 14px 18px rgba(23, 23, 23, 0.07));
  --shadow-product-sm:
    drop-shadow(0 1px 1px rgba(23, 23, 23, 0.07))
    drop-shadow(0 3px 4px rgba(23, 23, 23, 0.07));
  /* UI cards on the page pictures: lifted like a screenshot on its tile */
  --shadow-shot: 0 28px 48px -16px rgba(23, 23, 23, 0.22), 0 10px 18px -10px rgba(23, 23, 23, 0.14), 0 0 0 1px rgba(23, 23, 23, 0.05);
  --shadow-stuck: 0 6px 16px -12px rgba(23, 23, 23, 0.16);

  /* Space (9px base) */
  --s1: 9px;
  --s2: 18px;
  --s3: 27px;
  --s4: 36px;
  --s6: 54px;
  --s8: 72px;
  --s12: 108px;

  /* Layout */
  --container: 1280px;
  --gutter: 36px;
  --header-h: 73px;
  --tap: 44px;

  /* Motion */
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --fast: 0.15s;
}

@media (max-width: 700px) {
  :root {
    --gutter: 16px;
    --header-h: 64px;
    --title-md: 32px;
    --title-xl: 42px;
  }
}