/* PMT design tokens v1.0, from docs/brand/tokens.css (approved 2026-11-10). @font-face lives in fonts.css. */

:root {
  /* ---------- Colour: brand (p.01) ---------- */
  --navy:          #062B55;  /* Primary. White on navy 14.15 · navy on white 14.15 · on --paper-soft 12.94 */
  --navy-strong:   #041E3D;  /* Pressed/hover states, deep sections */
  --navy-raise:    #0B3A6E;  /* Raised surface on navy (cards on dark). White on it 11.38 */
  --navy-tint:     #1C4677;  /* Pattern lozenges on navy (decorative only) */
  --lime:          #80BC00;  /* Accent. FILLS, rules, motifs only on light bg (2.30 on white: never text there).
                                On navy it IS legible: lime on navy 6.14 · navy on lime 6.14 */
  --lime-strong:   #4F7A00;  /* Lime as TEXT on light: links, small labels. 5.10 on white · 4.67 on --paper-soft */
  --lime-deep:     #3D6B00;  /* Link hover. 6.36 on white */
  --lime-glow:     #A6D94A;  /* Highlights on navy (8.52) and light edges of 3D lozenges */

  /* ---------- Colour: roles ---------- */
  --action:        var(--navy);        /* The one main CTA ("Explore Our Solutions"): navy pill, white label */
  --action-alt:    var(--lime);        /* CTA on navy backgrounds: lime pill, navy label (6.14) */
  --primary:       var(--navy);        /* Headings, active nav, icons */
  --second:        var(--lime-strong); /* Links, focus rings, small accent text on light */
  --accent:        var(--lime);        /* Badges, rules, the lozenge, progress, ticks */

  --ink:           #062B55;  /* Headings and strong text (= navy, per the guide's typography page) */
  --ink-body:      #26394F;  /* Body copy. 11.79 on white · 10.79 on --paper-soft */
  --ink-soft:      #3E5573;  /* Secondary text. 7.63 on white · 6.98 on --paper-soft */
  --ink-mute:      #5B6E86;  /* Captions, meta. 5.22 on white */
  --ink-faint:     #A9B6C6;  /* Borders and icons only, NEVER text */
  --ink-on-dark:   #FFFFFF;  /* Text on navy */
  --ink-on-dark-soft: #C9D6E6; /* Secondary text on navy. 9.60 */
  --ink-on-dark-mute: #9FB3CC; /* Meta on navy. 6.60 */

  --paper:         #FFFFFF;  /* Background (p.01 White) */
  --paper-soft:    #F3F5F7;  /* Panels (p.01 Light Gray) */
  --surface:       #FFFFFF;  /* Cards */
  --line:          #E1E6EC;  /* Dividers, card borders */
  --line-strong:   #7A8BA1;  /* Form-control borders: 3.48 on white · 3.18 on --paper-soft (WCAG 1.4.11 needs 3) */

  /* ---------- Colour: status (separate from brand) ---------- */
  --success:       #2E7D32;  /* 5.13 on white */
  --success-soft:  #E8F3E9;
  --warning:       #B54708;  /* 5.43 on white */
  --warning-soft:  #FEF0E6;
  --danger:        #B42318;  /* 6.57 on white */
  --danger-soft:   #FDECEA;

  --focus-ring:    0 0 0 3px #FFFFFF, 0 0 0 5px var(--lime-strong);

  /* ---------- Type (p.02: Manrope Regular/Medium/Bold) ---------- */
  --font-latin:    "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-arabic:   "IBM Plex Sans Arabic", "Manrope", system-ui, sans-serif;
  --font:          var(--font-latin);           /* switched to --font-arabic under [lang="ar"] */

  --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; --fw-black: 800;

  /* Fluid scale, 360px → 1440px */
  --fs-display: clamp(2.5rem, 1.6rem + 4vw, 4.75rem);   /* 40 → 76  hero */
  --fs-h1:      clamp(2.125rem, 1.6rem + 2.4vw, 3.5rem); /* 34 → 56 */
  --fs-h2:      clamp(1.75rem, 1.4rem + 1.5vw, 2.625rem);/* 28 → 42 */
  --fs-h3:      clamp(1.25rem, 1.1rem + .6vw, 1.625rem); /* 20 → 26 */
  --fs-h4:      1.125rem;                                /* 18 */
  --fs-lead:    clamp(1.0625rem, 1rem + .35vw, 1.25rem); /* 17 → 20 */
  --fs-body:    1rem;                                    /* 16 */
  --fs-small:   .875rem;                                 /* 14 */
  --fs-eyebrow: .75rem;                                  /* 12, uppercase, tracked (the guide's "PMT / PRIME MEDICAL TECHNOLOGY") */

  --lh-tight: 1.08;  /* Latin display */
  --lh-head:  1.2;
  --lh-body:  1.65;
  --ls-display: -.025em;
  --ls-eyebrow: .16em;

  /* ---------- Shape (p.03 logo cards, p.07–08 mockups) ---------- */
  --r-xs: 6px;  --r-sm: 10px;  --r-md: 16px;  --r-lg: 24px;  --r-xl: 32px;  --r-pill: 999px;
  --skew: -24deg;          /* The lozenge slant (logo accent + pattern). Use for every slanted cut. */
  --cut: 12%;              /* Diagonal corner cut on cards/panels: clip-path inset along the slant */

  /* ---------- Space: 4px scale ---------- */
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px; --s-10: 128px;
  --gutter: clamp(16px, 4vw, 40px);
  --container: 1240px;
  --section-y: clamp(64px, 8vw, 128px);

  /* ---------- Depth: shadows + 3D (cover pages' layered slabs) ---------- */
  --shadow-1: 0 1px 2px rgba(6,43,85,.06), 0 2px 8px rgba(6,43,85,.06);
  --shadow-2: 0 4px 12px rgba(6,43,85,.08), 0 16px 32px rgba(6,43,85,.08);
  --shadow-3: 0 12px 24px rgba(6,43,85,.10), 0 40px 80px rgba(6,43,85,.16);
  --shadow-slab: 0 1px 0 rgba(255,255,255,.9) inset, 0 -1px 0 rgba(6,43,85,.05) inset, 0 30px 60px -20px rgba(6,43,85,.25);
  --shadow-lime: 0 10px 30px -8px rgba(128,188,0,.55);
  --perspective: 1200px;
  --tilt-max: 10deg;       /* Max pointer/device tilt for 3D objects */
  --depth-1: 20px; --depth-2: 60px; --depth-3: 120px;  /* translateZ layers */

  /* ---------- Motion ---------- */
  --ease-out:    cubic-bezier(.16, 1, .3, 1);      /* Reveals, slides in */
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);     /* Wipes, page transitions */
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1);  /* Small pops: tab bar, toggles */
  --dur-1: 140ms;  /* hover, press */
  --dur-2: 260ms;  /* small UI */
  --dur-3: 520ms;  /* reveals */
  --dur-4: 900ms;  /* scene moves, diagonal wipe */
  --stagger: 70ms;

  /* ---------- Layers ---------- */
  --z-header: 50; --z-tabbar: 60; --z-sheet: 80; --z-toast: 90;

  /* ---------- Mobile app shell (p.08) ---------- */
  --tabbar-h: 64px;
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}

[lang="ar"] {
  --font: var(--font-arabic);
  --lh-tight: 1.35;   /* Arabic display needs room for diacritics */
  --lh-head: 1.45;
  --lh-body: 1.85;
  --ls-display: 0;
  --ls-eyebrow: 0;    /* never letter-space Arabic */
}

@media (prefers-reduced-motion: reduce) {
  :root { --dur-1: 0ms; --dur-2: 0ms; --dur-3: 0ms; --dur-4: 0ms; --stagger: 0ms; --tilt-max: 0deg; }
}