/* ============================================================
   SYMPTEX — DESIGN TOKENS  (calm blue + teal · light medical)
   Single source of truth. Aeonik Pro typeface.
   Shared by the Design System page and the Instagram templates.
   ============================================================ */

/* ---- Aeonik Pro — LOGO / WORDMARK ONLY. Body + titles use SF Pro
        (the native Apple system stack: real SF Pro on Apple devices,
        graceful fallback elsewhere). ---- */
@font-face { font-family:"Aeonik Pro"; src:url("../fonts/aeonik/AeonikPro-Medium.otf") format("opentype"); font-weight:500; font-style:normal; font-display:swap; }
@font-face { font-family:"Aeonik Pro"; src:url("../fonts/aeonik/AeonikPro-Bold.otf") format("opentype"); font-weight:700; font-style:normal; font-display:swap; }

:root {
  /* ===== BRAND / INTENT — blue ===== */
  --blue-700:#0B4FA8;  --blue-600:#1366D6;  --blue-500:#2F80ED;
  --blue-100:#DCE9FB;  --blue-50:#EEF4FE;

  /* ===== ACCENT — teal ===== */
  --teal-700:#0F7A78;  --teal-600:#13A19B;  --teal-500:#2BB3AB;  --teal-100:#D6F3F1;  --teal-50:#EAFAF8;

  /* ===== NAVY (depth / signature CTA) ===== */
  --navy-700:#0A0E3D;  --navy-900:#05062B;

  /* ===== BRAND GRADIENT + GLOW ===== */
  --grad-brand:linear-gradient(100deg,var(--blue-600),var(--teal-600));
  --glow:0 18px 50px -18px rgba(19,102,214,.45);

  /* ===== INK / TEXT ===== */
  --ink-900:#0E1726;  --ink-700:#2B3648;  --ink-500:#5A6677;  --ink-400:#8A94A4;
  --on-blue:#FFFFFF;  --on-teal:#FFFFFF;

  /* ===== SURFACES & BORDERS ===== */
  --surface-0:#FFFFFF; --canvas:#F4F7FB; --surface-2:#EDF1F7;
  --border:#E2E8F1;    --border-strong:#CBD5E3;
  --overlay:rgba(14,23,38,0.48);

  /* ===== SEMANTIC STATES (-600 fill / -700 body text / -50 tint) ===== */
  --success-600:#1E9E6A; --success-700:#157A50; --success-50:#E7F6EF;
  --warning-600:#C77D10; --warning-700:#8F5B05; --warning-50:#FBF1DF;
  --danger-600:#D34A4A;  --danger-700:#B23434;  --danger-50:#FBE9E9;
  --info-600:#1366D6;    --info-50:#EEF4FE;
  --neutral-600:#5A6677; --neutral-50:#EDF1F7;

  /* ===== PASTEL TINTS — decorative only ===== */
  --tint-sky:#E6F0FD; --tint-teal:#E0F5F2; --tint-lilac:#EEEAFB;
  --tint-mint:#E6F6EC; --tint-peach:#FDEEE6; --tint-slate:#EAEEF4;

  /* ===== SPACING (4px base) ===== */
  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-5:20px;
  --space-6:24px; --space-8:32px; --space-10:40px; --space-12:48px; --space-16:64px; --space-20:80px;

  /* ===== RADII (v3 “soft clinical” — generous rounding) ===== */
  --r-xs:8px; --r-sm:12px; --r-md:16px; --r-lg:22px; --r-xl:28px; --r-2xl:32px; --r-pill:999px; --r-full:50%;

  /* ===== ELEVATION (cool ink tint, low) ===== */
  --e-0:0 0 0 1px var(--border);
  --e-1:0 1px 2px rgba(14,23,38,.06);
  --e-2:0 4px 12px rgba(14,23,38,.08);
  --e-3:0 12px 28px rgba(14,23,38,.12);
  --e-focus:0 0 0 3px rgba(19,102,214,.35);

  /* ===== MISC LITERAL TOKENS ===== */
  --stroke-icon:1.7px; --dur-shimmer:1200ms; --dur-toast:4000ms; --dur-marquee:32s;
  --now-line:var(--teal-600);

  /* ===== MOTION — durations ===== */
  --motion-instant:90ms; --motion-fast:160ms; --motion-base:240ms;
  --motion-slow:360ms; --motion-deliberate:560ms;

  /* ===== MOTION — easings ===== */
  --ease-standard:cubic-bezier(0.2,0,0,1);
  --ease-out:cubic-bezier(0.16,1,0.3,1);
  --ease-in:cubic-bezier(0.4,0,1,1);
  --ease-spring:cubic-bezier(0.34,1.4,0.5,1);

  /* ===== MOTION — distance & scale ===== */
  --motion-rise:16px; --motion-rise-lg:28px; --motion-settle:8px; --motion-nudge:4px; --motion-shake:2px;
  --motion-press:0.97; --motion-dip:0.96; --motion-pop:1.03; --motion-rise-in:0.96;

  /* ===== TYPE ===== */
  /* SF Pro via the Apple system stack — body + all titles. */
  --font:-apple-system,BlinkMacSystemFont,"SF Pro Text","SF Pro Display","Helvetica Neue",Helvetica,Arial,sans-serif;
  /* Aeonik Pro — logo / wordmark ONLY. */
  --font-logo:"Aeonik Pro",var(--font);
}