/* ========================================================================= TANNKLINIKK PARVANEH MONEMY — DESIGN TOKENS Alle kontrastforhold er verifisert mot WCAG 2.2 AA. Se docs/DESIGN-SYSTEM.md for full kontrastmatrise. Endre aldri en farge her uten å re-verifisere. ========================================================================= */ /* --- Selvhostede fonter (OFL). Ingen tredjeparts-CDN => ingen IP-lekkasje til Google Fonts. Se docs/DESIGN-SYSTEM.md § Personvern. --- */ @font-face { font-family: 'Fraunces'; src: url('../assets/fonts/fraunces-var.woff2') format('woff2-variations'); font-weight: 100 900; font-stretch: normal; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+2000-206F, U+2074, U+20AC, U+2122, U+2212; } @font-face { font-family: 'InterVar'; src: url('../assets/fonts/inter-var.woff2') format('woff2-variations'); font-weight: 100 900; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+2000-206F, U+2074, U+20AC, U+2122, U+2212; } :root { /* --------------------------------------------------------------------- FARGE Primærfargen er senket fra referansens #2F9DB5 til #0F7488. Grunn: #2F9DB5 gir 2.9:1 mot hvitt og består IKKE WCAG AA for tekst eller for hvit tekst på knapp. #0F7488 gir 5.42:1 og beholder samme kulør. --------------------------------------------------------------------- */ /* Blekk / tekst */ --c-ink: #0F2E38; /* 14.30:1 på hvit — all brødtekst og overskrifter */ --c-ink-soft: #1D4552; /* Sekundære overskrifter */ --c-muted: #4E6B77; /* 5.69:1 på hvit — ingress, bildetekst, meta */ --c-faint: #5F7C88; /* 4.44:1 — KUN for tekst ≥ 24px eller ≥19px bold */ /* Primær (turkis) */ --c-teal: #0F7488; /* 5.42:1 på hvit — lenker, ikoner, knappeflate */ --c-teal-600: #0B5D6E; /* 7.49:1 — hover, tekst på lys flate */ --c-teal-700: #094B59; /* 9.71:1 — active, mørke flater */ --c-teal-300: #7FBECB; /* Dekor, hairlines på mørk flate */ --c-teal-100: #DCEDF1; /* Flatefyll */ /* Varm aksent — de 25 % «menneskelig». Brukes sparsomt: én seksjon per side, aldri på CTA (CTA skal alltid være turkis). */ --c-sand: #B08968; --c-sand-ink: #7A5B42; /* 6.17:1 på hvit */ --c-sand-bg: #F6F1EA; --c-sand-line: #E4D8C8; /* Flater */ --c-white: #FFFFFF; --c-bg: #F5FAFB; /* Sidebakgrunn — svært lys blå */ --c-bg-2: #EAF3F6; /* Alternerende seksjon */ --c-line: #D6E4E9; /* Hairline */ --c-line-soft: #E6EFF2; /* Status */ --c-demo-bg: #FFF7E6; --c-demo-line: #E8C57A; --c-demo-ink: #6B4E12; /* 6.42:1 på --c-demo-bg */ --c-urgent-bg: #FDF2F0; --c-urgent-ink: #8A3324; /* 6.90:1 på hvit */ /* Fokusring — WCAG 2.2 «Focus Appearance» */ --c-focus: #0B5D6E; --c-focus-halo: #FFFFFF; /* --------------------------------------------------------------------- TYPOGRAFI Display: Fraunces variable (opsz 9–144, wght 100–900) Body: Inter variable (wght 100–900) Fallback-stakken er valgt slik at siden er lesbar og fortsatt pen dersom woff2 ikke lastes. --------------------------------------------------------------------- */ --f-display: 'Fraunces', 'Iowan Old Style', 'Palatino Linotype', Palatino, 'Book Antiqua', Georgia, 'Times New Roman', serif; --f-body: 'InterVar', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; /* Fluid skala. clamp() gjør at vi slipper å hoppe i breakpoints. */ --t-display-1: clamp(2.6rem, 1.6rem + 4.4vw, 5.25rem); --t-display-2: clamp(2.15rem, 1.5rem + 2.9vw, 3.75rem); --t-h2: clamp(1.85rem, 1.4rem + 2vw, 2.85rem); --t-h3: clamp(1.3rem, 1.15rem + 0.7vw, 1.65rem); --t-h4: clamp(1.08rem, 1.02rem + 0.3vw, 1.22rem); --t-lead: clamp(1.08rem, 1.01rem + 0.34vw, 1.3rem); --t-body: 1.0625rem; /* 17px — behagelig for lengre lesing */ --t-small: 0.9375rem; --t-micro: 0.8125rem; --lh-display: 1.04; --lh-heading: 1.16; --lh-body: 1.68; /* Romslig — helseinnhold leses saktere */ --lh-tight: 1.4; --ls-display: -0.021em; --ls-heading: -0.013em; --ls-eyebrow: 0.14em; /* --------------------------------------------------------------------- ROM 8px-basert skala. Store verdier med vilje — luft er halve premium- følelsen. --------------------------------------------------------------------- */ --s-1: 0.25rem; --s-2: 0.5rem; --s-3: 0.75rem; --s-4: 1rem; --s-5: 1.5rem; --s-6: 2rem; --s-7: 2.5rem; --s-8: 3rem; --s-9: 4rem; --s-10: 5rem; --s-11: 6.5rem; --s-12: 8rem; --section-y: clamp(3.5rem, 2rem + 6.5vw, 7.5rem); --section-y-lg: clamp(4.5rem, 2.5rem + 8vw, 9.5rem); /* Rammer og radius — behersket. Referansen brukte 16px+ overalt, som leser «app», ikke «klinikk». */ --r-sm: 4px; --r-md: 8px; --r-lg: 14px; --r-pill: 999px; --bw: 1px; /* Skygger: nesten ingen. Vi bruker hairlines i stedet. Én myk skygge er reservert for elementer som faktisk svever (sticky header ved scroll, mobil bunnlinje, modal). */ --shadow-float: 0 1px 2px rgba(15, 46, 56, .05), 0 8px 28px -12px rgba(15, 46, 56, .16); --shadow-lift: 0 1px 2px rgba(15, 46, 56, .06), 0 18px 48px -22px rgba(15, 46, 56, .28); /* Bredder */ --w-page: 1280px; --w-wide: 1440px; --w-text: 68ch; --w-narrow: 46rem; --gutter: clamp(1.25rem, 0.6rem + 2.6vw, 3.5rem); /* Bevegelse — rolig. Ingenting over 400ms, ingenting som spretter. */ --e-out: cubic-bezier(.22, .61, .36, 1); --e-io: cubic-bezier(.65, .05, .36, 1); --d-1: 140ms; --d-2: 240ms; --d-3: 380ms; --header-h: 76px; --z-header: 100; --z-mobilebar: 90; --z-drawer: 200; --z-modal: 300; } @media (max-width: 900px) { :root { --header-h: 64px; } } /* Respekter systeminnstilling for redusert bevegelse. */ @media (prefers-reduced-motion: reduce) { :root { --d-1: 0ms; --d-2: 0ms; --d-3: 0ms; } *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; } }