/* ============================================================
   jouwopticien — Design Tokens  (Direction "Helder")
   Bron: docs/jouwopticien Design System/colors_and_type.css
   Hergebruik deze --ji-* tokens; verzin GEEN nieuwe waarden (PRD decisie 26).

   FONT: Lexend laadt nu via de Google Fonts CDN. Voor productie de woff2
   self-hosten in /fonts en de @import vervangen door @font-face (US-1 caveat).
   ============================================================ */

/* Lexend SELF-HOSTED — geen Google-Fonts-CDN-afhankelijkheid meer (woff2 in /fonts, @font-face in /css/lexend.css). */
@import url('/css/lexend.css');

:root {
  /* ---------- Brand color ---------- */
  --ji-primary:        #0B4F6C;  /* deep petrol — text-safe on white (~8:1) */
  --ji-primary-hover:  #093E56;
  --ji-primary-press:  #07303F;
  --ji-teal:           #2A9D8F;  /* accent — decoration / large only */
  --ji-teal-deep:      #1E7E73;  /* text-safe teal variant (~4.6:1) */

  /* ---------- Neutrals / surfaces ---------- */
  --ji-ink:            #0E2A33;
  --ji-ink-soft:       #2E4750;
  --ji-muted:          #5C7780;
  --ji-line:           #DCEBE9;
  --ji-line-strong:    #C4DAD7;
  --ji-surface:        #F4FAF9;
  --ji-mint:           #E9F4F3;
  --ji-mint-deep:      #D6EBE8;
  --ji-card:           #FFFFFF;

  /* ---------- Semantic ---------- */
  --ji-success:        #1E7E73;
  --ji-success-bg:     #E3F3F0;
  --ji-warning:        #B57714;
  --ji-warning-bg:     #FBF0DD;
  --ji-danger:         #C7453B;
  --ji-danger-bg:      #FBE9E7;
  --ji-info:           #0B4F6C;
  --ji-info-bg:        #E6F0F4;

  /* ---------- Rating ---------- */
  --ji-star:           #F2A93B;
  --ji-star-empty:     #E2E8E7;

  /* ---------- Typography ---------- */
  --ji-font: 'Lexend', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --ji-size-display: 38px;  --ji-lh-display: 1.12;
  --ji-size-h1:      30px;  --ji-lh-h1: 1.18;
  --ji-size-h2:      24px;  --ji-lh-h2: 1.25;
  --ji-size-h3:      19px;  --ji-lh-h3: 1.3;
  --ji-size-lg:      18px;  --ji-lh-lg: 1.5;
  --ji-size-body:    16px;  --ji-lh-body: 1.6;   /* min body size for legibility */
  --ji-size-sm:      14px;  --ji-lh-sm: 1.5;
  --ji-size-xs:      13px;  --ji-lh-xs: 1.45;     /* labels / meta — never smaller */

  --ji-w-light: 300;  --ji-w-reg: 400;  --ji-w-med: 500;  --ji-w-semi: 600;  --ji-w-bold: 700;
  --ji-track-tight: -0.02em;
  --ji-track-label:  0.02em;

  /* ---------- Spacing (4px base) ---------- */
  --ji-1: 4px;  --ji-2: 8px;  --ji-3: 12px; --ji-4: 16px; --ji-5: 20px;
  --ji-6: 24px; --ji-7: 32px; --ji-8: 40px; --ji-9: 48px; --ji-10: 64px;

  /* ---------- Radius ---------- */
  --ji-r-sm:  10px;
  --ji-r-md:  14px;
  --ji-r-lg:  20px;
  --ji-r-xl:  26px;
  --ji-r-pill: 999px;

  /* ---------- Shadow (tinted with brand petrol, never neutral gray) ---------- */
  --ji-shadow-sm:   0 1px 2px rgba(11,79,108,.06);
  --ji-shadow-card: 0 6px 26px rgba(11,79,108,.07);
  --ji-shadow-pop:  0 14px 40px rgba(11,79,108,.14);
  --ji-focus:       0 0 0 3px rgba(42,157,143,.45);  /* visible keyboard focus ring */

  /* ---------- Motion ---------- */
  --ji-ease: cubic-bezier(.22,.61,.36,1);
  --ji-dur: 180ms;
}

/* ---------- Semantic type helpers ---------- */
.ji-display { font:var(--ji-w-semi) var(--ji-size-display)/var(--ji-lh-display) var(--ji-font); letter-spacing:var(--ji-track-tight); color:var(--ji-ink); margin:0; }
.ji-h1 { font:var(--ji-w-semi) var(--ji-size-h1)/var(--ji-lh-h1) var(--ji-font); letter-spacing:var(--ji-track-tight); color:var(--ji-ink); margin:0; }
.ji-h2 { font:var(--ji-w-semi) var(--ji-size-h2)/var(--ji-lh-h2) var(--ji-font); letter-spacing:var(--ji-track-tight); color:var(--ji-ink); margin:0; }
.ji-h3 { font:var(--ji-w-semi) var(--ji-size-h3)/var(--ji-lh-h3) var(--ji-font); color:var(--ji-ink); margin:0; }
.ji-body { font:var(--ji-w-reg) var(--ji-size-body)/var(--ji-lh-body) var(--ji-font); color:var(--ji-ink); margin:0; }
.ji-muted { color:var(--ji-muted); }
.ji-label { font:var(--ji-w-med) var(--ji-size-xs)/var(--ji-lh-xs) var(--ji-font); letter-spacing:var(--ji-track-label); color:var(--ji-muted); }

/* Reduced motion: respect user preference (US-1 a11y AC). */
@media (prefers-reduced-motion: reduce) {
  :root { --ji-dur: 0ms; }
}