/* ============================================================
   Emirae.Pro Design System — TOKENS  (Phase 1 migration)
   Source of truth: design-system tokens/{colors,typography,spacing}.css.

   SCOPED to `.uaec-ds` (applied to site header, site footer, homepage
   <main>) so these values do NOT override the theme's existing global
   Tailwind v4 tokens (--color-*, --radius-*) on non-migrated pages.
   Custom properties inherit to all descendants, incl. fixed mega panels
   and the mobile drawer (DOM children of the header).

   color-mix() values ship a static fallback on the preceding line;
   browsers without color-mix support keep the fallback.
   ============================================================ */

.uaec-ds {
  /* ---- Brand / primary (blue) ---- */
  --blue-50:#eef5fd; --blue-100:#d9e8fb; --blue-200:#a0c3ff; --blue-300:#6ba3f5;
  --blue-400:#3d86ec; --blue-500:#1c74e0; --blue-600:#116acc; --blue-700:#0d56a8;
  --blue-800:#0c478a; --blue-900:#0d3c72; --blue-stroke:#0052ff;

  /* ---- Secondary navy ---- */
  --navy-900:#121a28; --navy-800:#182233; --navy-700:#22304a; --navy-600:#2e3a59;
  --navy-tint:#b3cee2; --navy-haze:#d9dde7;

  /* ---- Neutral gray scale ---- */
  --white:#ffffff; --gray-50:#f9fafb; --gray-100:#f3f4f6; --gray-200:#e5e7eb;
  --gray-300:#d1d5db; --gray-400:#9ca3af; --gray-500:#6b7280; --gray-600:#4b5563;
  --gray-700:#374151; --gray-800:#1f2937; --gray-900:#111827; --black:#0f1620;

  /* ---- State ---- */
  --coral:#fd4e5d;
  --success-50:#eef8ec; --success-500:#76ca66; --success-700:#27ae60;
  --warning-50:#fef6e4; --warning-500:#fbc756; --warning-700:#e2b93b;
  --error-50:#fcebeb;   --error-500:#ba0000;   --error-700:#9a0000;
  --info-50:#eaf2fd;    --info-500:#2f80ed;

  /* ---- Semantic aliases ---- */
  --accent:var(--blue-600); --accent-hover:var(--blue-700); --accent-pressed:var(--blue-800);
  --accent-soft:var(--blue-50); --accent-soft-2:var(--blue-100); --accent-on:var(--white);
  --accent-ring:rgba(17,106,204,.35);
  --accent-ring:color-mix(in srgb, var(--blue-600) 35%, transparent);

  --ink:var(--navy-800); --ink-soft:var(--navy-600);

  --text:var(--gray-800); --text-strong:var(--gray-900); --text-secondary:var(--gray-600);
  --text-muted:var(--gray-400); --text-on-dark:var(--white);
  --text-on-dark-soft:rgba(255,255,255,.62);
  --text-on-dark-soft:color-mix(in srgb, var(--white) 62%, transparent);

  --page:var(--gray-50); --surface:var(--white); --surface-alt:var(--gray-100);
  --surface-dark:var(--navy-800);

  --border:var(--gray-200); --border-strong:var(--gray-300);
  --border-dark:rgba(255,255,255,.1);
  --border-dark:color-mix(in srgb, var(--white) 10%, transparent);

  --focus-ring:var(--blue-stroke);

  /* ---- Typography ---- */
  --font-sans:"Ubuntu", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-display:"Ubuntu", var(--font-sans);
  --font-mono:ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  --fw-light:300; --fw-regular:400; --fw-medium:500; --fw-bold:700;
  --fs-display:48px; --lh-display:56px; --fs-h1:32px; --lh-h1:38px;
  --fs-h2:24px; --lh-h2:30px; --fs-h3:20px; --lh-h3:26px; --fs-lg:18px; --lh-lg:26px;
  --fs-body:16px; --lh-body:24px; --fs-sm:14px; --lh-sm:20px; --fs-xs:13px; --lh-xs:18px;
  --fs-2xs:11px; --lh-2xs:16px;
  --tracking-tight:-0.01em; --tracking-normal:0; --tracking-wide:0.04em; --tracking-eyebrow:0.14em;

  /* ---- Spacing (8px grid) ---- */
  --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; --space-24:96px;

  /* ---- Radius ---- */
  --radius-xs:4px; --radius-sm:6px; --radius-md:8px; --radius-lg:12px; --radius-xl:16px;
  --radius-2xl:20px; --radius-pill:999px;

  /* ---- Shadows (navy-tinted) ---- */
  --shadow-xs:0 1px 2px rgba(19,10,46,.03);
  --shadow-sm:0 1px 3px rgba(19,10,46,.07), 0 1px 2px rgba(19,10,46,.03);
  --shadow-md:0 4px 14px rgba(19,10,46,.08), 0 1px 3px rgba(19,10,46,.04);
  --shadow-lg:0 12px 32px rgba(19,10,46,.10), 0 2px 6px rgba(19,10,46,.05);
  --shadow-xl:0 24px 60px rgba(19,10,46,.13), 0 4px 12px rgba(19,10,46,.06);
  --shadow-accent:0 8px 22px rgba(17,106,204,.24);
  --shadow-accent:0 8px 22px color-mix(in srgb, var(--blue-600) 24%, transparent);

  /* ---- Layout ---- */
  --container:1440px; --container-pad:24px;

  /* ---- Motion ---- */
  --ease:cubic-bezier(0.4,0,0.2,1); --ease-out:cubic-bezier(0.16,1,0.3,1);
  --dur-fast:130ms; --dur:200ms; --dur-slow:320ms;

  /* ---- Header-scoped ---- */
  --tint:#f1f6fd; --tint-2:#e8f0fb; --header-h:76px;
}