/* =====================================================================
   NeoFertis family tokens — v1.0 (2026-10-12)
   One file for: split landing (neofertis.com), IVF site, Dental Shopify theme.
   Light theme only. Contrast ratios: see design-system.md §2.
   Division scoping: put data-division="ivf" or data-division="dental"
   on <html> or any section; --nf-accent / --nf-accent-ink switch with it.
   ===================================================================== */

:root {
  /* ---------- Brand core (shared by both divisions) ---------- */
  --nf-navy:        #0A2860;  /* master brand, theme-color, dark fields, footer */
  --nf-navy-700:    #133A80;  /* hover on dark fields, raised navy surfaces */
  --nf-blue:        #1050B0;  /* primary action, links, focus ring */
  --nf-blue-hover:  #0C3F8C;  /* primary action hover/active */
  --nf-blue-50:     #E8EFFA;  /* selected chip, info tint */
  --nf-blue-100:    #D2DFF4;  /* selected outline tint, progress track */
  --nf-navy-200:    #B9C7E0;  /* secondary text ON navy (8.3:1) */

  /* ---------- Division accents (warm siblings, ~10deg apart) ---------- */
  --nf-gold:        #F5A52A;  /* IVF accent + NeoFertis master accent. Decor / on navy only */
  --nf-gold-ink:    #8A5600;  /* gold-family TEXT on white/tints (6.2:1) */
  --nf-gold-tint:   #FDF3E2;  /* gold-family background tint */
  --nf-apricot:     #F9A35A;  /* Dental accent = dental logo orange. Decor / on navy only */
  --nf-apricot-ink: #9A4A0B;  /* apricot-family TEXT on white/tints (6.25:1) */
  --nf-apricot-tint:#FEF1E6;
  --nf-dental-logo-blue: #2356A6; /* ONLY inside the dental logo artwork; never for UI */

  /* default division = master (gold) */
  --nf-accent:      var(--nf-gold);
  --nf-accent-ink:  var(--nf-gold-ink);
  --nf-accent-tint: var(--nf-gold-tint);

  /* ---------- Neutrals (cool "lab white", never cream) ---------- */
  --nf-ink:         #0E1C36;  /* body text (17:1) */
  --nf-muted:       #4A5874;  /* secondary text (7.1:1) */
  --nf-subtle:      #5F6C88;  /* tertiary text, captions, placeholders (5.3:1) */
  --nf-field-border:#8693AB;  /* input borders, swatch rings (3.1:1 UI) */
  --nf-line:        #D6DEEB;  /* dividers, card borders (decorative) */
  --nf-surface:     #F3F6FB;  /* page background sections, dental field */
  --nf-white:       #FFFFFF;

  /* ---------- Status ---------- */
  --nf-success:     #1B7A4B;
  --nf-success-tint:#E6F4EC;
  --nf-error:       #B42318;
  --nf-error-tint:  #FDECEA;
  --nf-warning-ink: #8A5600;
  --nf-warning-tint:#FDF3E2;

  /* ---------- Typography ---------- */
  --nf-font-en: "Outfit", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --nf-font-ar: "Cairo", "Segoe UI", Tahoma, sans-serif;
  --nf-font:    var(--nf-font-en);

  /* Modular scale 1.25 (major third), base 16px; fluid between 390 and 1440 */
  --nf-fs-xs:   0.8125rem;                         /* 13 — legal, meta */
  --nf-fs-sm:   0.875rem;                          /* 14 — captions, badges */
  --nf-fs-base: 1rem;                              /* 16 — body */
  --nf-fs-md:   1.125rem;                          /* 18 — lead, card titles */
  --nf-fs-lg:   clamp(1.25rem, 1.15rem + 0.4vw, 1.5rem);     /* 20–24 — h3 */
  --nf-fs-xl:   clamp(1.5rem, 1.3rem + 0.9vw, 2rem);         /* 24–32 — h2 */
  --nf-fs-2xl:  clamp(2rem, 1.6rem + 1.7vw, 3rem);           /* 32–48 — h1 */
  --nf-fs-3xl:  clamp(2.5rem, 1.8rem + 3vw, 4.25rem);        /* 40–68 — split titles */

  --nf-fw-regular: 400;
  --nf-fw-medium:  500;
  --nf-fw-semi:    600;
  --nf-fw-bold:    700;

  --nf-lh-tight: 1.1;   /* display EN */
  --nf-lh-head:  1.2;   /* h2/h3 EN */
  --nf-lh-body:  1.6;   /* body EN */
  --nf-tracking-display: -0.02em;

  /* ---------- Spacing (4px base) ---------- */
  --nf-space-1: 4px;
  --nf-space-2: 8px;
  --nf-space-3: 12px;
  --nf-space-4: 16px;
  --nf-space-5: 24px;
  --nf-space-6: 32px;
  --nf-space-7: 48px;
  --nf-space-8: 64px;
  --nf-space-9: 96px;
  --nf-space-10: 128px;
  --nf-gutter: clamp(16px, 4vw, 48px);
  --nf-container: 1200px;
  --nf-measure: 68ch;

  /* ---------- Radius (hierarchy: small things small) ---------- */
  --nf-r-xs: 4px;     /* badges, tags */
  --nf-r-sm: 8px;     /* buttons, inputs, selects */
  --nf-r-md: 14px;    /* cards, product tiles, dropdowns */
  --nf-r-lg: 24px;    /* hero panels, modal sheets */
  --nf-r-pill: 999px; /* chips, language switch, qty stepper */
  --nf-r-round: 50%;  /* shade discs, avatar dots */

  /* ---------- Elevation (navy-tinted, not grey) ---------- */
  --nf-shadow-1: 0 1px 2px rgba(10, 40, 96, .06), 0 1px 1px rgba(10, 40, 96, .04);
  --nf-shadow-2: 0 6px 20px -6px rgba(10, 40, 96, .18), 0 2px 6px rgba(10, 40, 96, .06);
  --nf-shadow-3: 0 24px 48px -16px rgba(10, 40, 96, .28);
  --nf-ring:     0 0 0 3px var(--nf-white), 0 0 0 5px var(--nf-blue); /* focus */
  --nf-ring-dark:0 0 0 3px var(--nf-navy),  0 0 0 5px var(--nf-gold);  /* focus on navy */

  /* ---------- Motion ---------- */
  --nf-ease:      cubic-bezier(.2, .7, .2, 1);   /* standard (decelerate) */
  --nf-ease-io:   cubic-bezier(.65, 0, .35, 1);  /* split expand */
  --nf-dur-fast:  120ms;  /* hover color, press */
  --nf-dur:       200ms;  /* dropdowns, swatch select */
  --nf-dur-slow:  480ms;  /* split-panel expand, drawer */

  /* ---------- Layout ---------- */
  --nf-header-h: 72px;
  --nf-z-header: 50;
  --nf-z-drawer: 80;
  --nf-z-toast:  90;
}

/* Division scoping */
[data-division="ivf"] {
  --nf-accent: var(--nf-gold);
  --nf-accent-ink: var(--nf-gold-ink);
  --nf-accent-tint: var(--nf-gold-tint);
}
[data-division="dental"] {
  --nf-accent: var(--nf-apricot);
  --nf-accent-ink: var(--nf-apricot-ink);
  --nf-accent-tint: var(--nf-apricot-tint);
}

/* Arabic: switch family, give Cairo more line-height, no negative tracking */
:lang(ar), [dir="rtl"] {
  --nf-font: var(--nf-font-ar);
  --nf-lh-tight: 1.3;
  --nf-lh-head: 1.4;
  --nf-lh-body: 1.8;
  --nf-tracking-display: 0;
}
/* Latin brand/product names inside Arabic text keep the Latin face */
:lang(ar) [lang="en"], :lang(ar) .nf-latin { font-family: var(--nf-font-en); }

@media (prefers-reduced-motion: reduce) {
  :root { --nf-dur-fast: 0ms; --nf-dur: 0ms; --nf-dur-slow: 0ms; }
}

/* ---------- Minimal base (safe to include in both codebases) ---------- */
.nf-base {
  font-family: var(--nf-font);
  font-size: var(--nf-fs-base);
  line-height: var(--nf-lh-body);
  color: var(--nf-ink);
  background: var(--nf-white);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
.nf-base :focus-visible { outline: none; box-shadow: var(--nf-ring); border-radius: var(--nf-r-sm); }
.nf-on-navy :focus-visible { box-shadow: var(--nf-ring-dark); }