/* Renaissance Dental — designtokens i LumoKits standardnamn.
   Källa: Stitch-utkastet (design-system/stitch/DESIGN.md), omarbetat i mockupen
   (Instrument Sans, klassisk blå). Flyttas senare till
   design-system/_client_ds/styles.css — samma namn, så komponenterna följer med. */

/* Wix Madefor, självhostad (variabel, vikt 400–800). Bara latin + kyrillisk grundmängd — svenska och ryska. Ingen begäran till Google. */
@font-face { font-family: "Wix Madefor Display"; font-style: normal; font-weight: 400 800; font-display: swap;
  src: url(fonts/wix-madefor-display-cyrillic.woff2) format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Wix Madefor Display"; font-style: normal; font-weight: 400 800; font-display: swap;
  src: url(fonts/wix-madefor-display-latin.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Wix Madefor Text"; font-style: normal; font-weight: 400 800; font-display: swap;
  src: url(fonts/wix-madefor-text-cyrillic.woff2) format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Wix Madefor Text"; font-style: normal; font-weight: 400 800; font-display: swap;
  src: url(fonts/wix-madefor-text-latin.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

:root {
  /* Varumärkesskala: klassisk blå från dagens renaissancedental.se (riktning "d").
     Loggans turkos ligger separat i --logo och används bara i loggan och små detaljer. */
  --blush-50:  #eaf2fa;   /* ljusaste tonade ytan */
  --blush-100: #d6e6f5;   /* panel, tonad yta */
  --blush-200: #c0d9ed;   /* dagens sajt */
  --blush-300: #accde7;   /* dagens sajt */
  --blush-400: #5a9bd3;
  --blush-500: #2f84c8;
  --blush-600: #0b6e86;   /* knappar, länkar — petrol i loggans nyans (5.9:1 mot vitt) */
  --blush-700: #0a5d71;   /* liten accenttext, etiketter, hover — mörk petrol */

  /* Ytor: sidans bakgrund och panelton. Toningar över bilder använder dessa, så de smälter in i varje tema. */
  --surface: #ffffff;
  --surface-rgb: 255, 255, 255;
  --panel-rgb: 234, 242, 250;   /* = --blush-50 */

  --logo:      #16a5c6;   /* loggans turkos: fokusring, prickar i hälsningsbandet */

  --sage-50:  var(--blush-50);
  --sage-100: var(--blush-100);
  --sage-200: var(--blush-200);
  --sage-300: var(--blush-300);
  --sage-400: var(--blush-400);
  --sage-500: var(--blush-500);
  --sage-600: var(--blush-600);
  --sage-700: var(--blush-700);
  --cream:    var(--blush-50);

  /* Neutraler: skiffertonade */
  --ink-50:  #f8fafb;     /* sidans duk */
  --ink-100: #e2e8f0;     /* hårlinjer */
  --ink-200: #cbd5df;
  --ink-300: #9aa7b3;
  --ink-400: #56636e;     /* dämpad text — 5,7:1 mot ytan (WCAG AA), var #6b7782 = 4,25:1 */
  --ink-500: #3f484c;     /* menytext */
  --ink-600: #3f4a54;     /* brödtext */
  --ink-700: #375166;     /* rubriker (samma som dagens sajt) */
  --ink-900: #121d26;

  --white:   #ffffff;
  --paper:   #f7f9fc;

  --star:    #f5c136;
  --danger:  #ba1a1a;

  --bg:           var(--white);
  --bg-soft:      var(--blush-50);
  --bg-panel:     var(--blush-100);
  --bg-inverse:   var(--blush-600);
  --fg:           var(--ink-600);
  --fg-muted:     var(--ink-400);
  --fg-subtle:    var(--ink-300);
  --fg-strong:    var(--ink-700);
  --fg-inverse:   var(--white);
  --fg-accent:    var(--blush-700);
  --border:       var(--ink-100);
  --border-soft:  var(--blush-100);
  --border-strong:var(--ink-200);

  /* En familj för allt: loggan får vara det enda dekorativa. --font-serif behåller
     LumoKits namn men pekar på samma sans. */
  --font-serif: "Wix Madefor Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --font-sans:  "Wix Madefor Text", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;

  --fs-display: clamp(36px, 4.4vw, 56px);
  --fs-h1:      clamp(38px, 4.4vw, 58px);
  --fs-h2:      clamp(28px, 2.8vw, 40px);
  --fs-h3:      20px;
  --fs-h4:      18px;
  --fs-body:    16px;
  --fs-lead:    18px;
  --fs-small:   14px;
  --fs-tiny:    12px;
  --fs-eyebrow: 12px;

  --lh-tight:   1.14;
  --lh-snug:    1.25;
  --lh-normal:  1.6;
  --lh-loose:   1.75;

  --tracking-tight:    -0.025em;
  --tracking-wide:     0.01em;
  --tracking-eyebrow:  0.14em;

  --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;

  --radius-sm:   8px;
  --radius-md:   12px;   /* knappar, fält */
  --radius-lg:   16px;   /* kort, paneler */
  --radius-pill: 999px;

  --shadow-xs: 0 1px 8px rgba(0, 0, 0, 0.04);
  --shadow-sm: 0 4px 20px -2px rgba(55, 81, 102, 0.04);
  --shadow-md: 0 12px 32px -4px rgba(11, 110, 134, 0.08);
  --shadow-lg: 0 24px 48px -8px rgba(55, 81, 102, 0.12);

  --container: 1440px;
  --gutter:    48px;
}
@media (max-width: 900px) { :root { --gutter: 32px; } }
@media (max-width: 600px) { :root { --gutter: 16px; } }

/* Ryska: Wix Madefor har kyrilliska tecken, så ingen särskild typsnittsregel behövs (beslut 2026-10-25). */