/* ============================================================
   BlueMint — Design tokens, fonts, theme system
   Brand: Navy #183D6F · Mint #75C697 · Black
   ============================================================ */

@font-face {
  font-family: "Dubai";
  src: url("../assets/fonts/Dubai-Light.ttf") format("truetype");
  font-weight: 300;
  font-display: swap;
}
@font-face {
  font-family: "Dubai";
  src: url("../assets/fonts/Dubai-Medium.ttf") format("truetype");
  font-weight: 500;
  font-display: swap;
}

:root {
  /* Brand constants (do not theme) */
  --brand-navy: #183d6f;
  --brand-navy-2: #0f2747;
  --brand-mint: #75c697;
  --brand-mint-deep: #4f9e72;

  /* Type */
  --font-display: "Dubai", system-ui, sans-serif;
  --font-body: "Dubai", system-ui, sans-serif;
  --font-mono: "Source Code Pro", ui-monospace, "SF Mono", monospace;

  /* Spatial */
  --page-pad: clamp(20px, 5vw, 88px);
  --maxw: 1480px;
  --radius: 14px;
  --radius-lg: 26px;

  /* Motion */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --motion: 1; /* scaled by Tweaks */

  --accent: var(--brand-mint);
  --accent-ink: #06140d;
}

/* ---------- DARK (default) ---------- */
:root,
[data-theme="dark"] {
  color-scheme: dark;
  --bg: #08111c;
  --bg-grad-a: #0a1320;
  --bg-grad-b: #060d16;
  --surface: #0d1a2a;
  --surface-2: #102438;
  --ink: #eaf2f9;
  --ink-soft: rgba(234, 242, 249, 0.64);
  --ink-faint: rgba(234, 242, 249, 0.40);
  --line: rgba(234, 242, 249, 0.12);
  --line-strong: rgba(234, 242, 249, 0.24);
  --navy-on-bg: #2f63ac;
  --hero-flower: 0.5;
  --shadow: 0 40px 90px -40px rgba(0, 0, 0, 0.8);
  --nav-bg: rgba(8, 17, 28, 0.6);
}

/* ---------- LIGHT ---------- */
[data-theme="light"] {
  color-scheme: light;
  --bg: #f4f7fa;
  --bg-grad-a: #ffffff;
  --bg-grad-b: #eef3f8;
  --surface: #ffffff;
  --surface-2: #eef3f8;
  --ink: #0d1f38;
  --ink-soft: rgba(13, 31, 56, 0.66);
  --ink-faint: rgba(13, 31, 56, 0.42);
  --line: rgba(13, 31, 56, 0.12);
  --line-strong: rgba(13, 31, 56, 0.22);
  --navy-on-bg: #183d6f;
  --accent: var(--brand-navy);
  --accent-ink: #ffffff;
  --hero-flower: 0.85;
  --shadow: 0 40px 80px -45px rgba(15, 39, 71, 0.45);
  --nav-bg: rgba(244, 247, 250, 0.72);
}

/* ---------- MIX (light base, dark hero / contact / footer) ---------- */
[data-theme="mix"] {
  color-scheme: light;
  --bg: #f4f7fa;
  --bg-grad-a: #ffffff;
  --bg-grad-b: #eef3f8;
  --surface: #ffffff;
  --surface-2: #eef3f8;
  --ink: #0d1f38;
  --ink-soft: rgba(13, 31, 56, 0.66);
  --ink-faint: rgba(13, 31, 56, 0.42);
  --line: rgba(13, 31, 56, 0.12);
  --line-strong: rgba(13, 31, 56, 0.22);
  --navy-on-bg: #183d6f;
  --hero-flower: 0.55;
  --shadow: 0 40px 80px -45px rgba(15, 39, 71, 0.45);
  --nav-bg: rgba(244, 247, 250, 0.72);
}
/* Dark islands within MIX */
[data-theme="mix"] .tone-dark {
  --bg: #08111c;
  --surface: #0d1a2a;
  --surface-2: #102438;
  --ink: #eaf2f9;
  --ink-soft: rgba(234, 242, 249, 0.64);
  --ink-faint: rgba(234, 242, 249, 0.40);
  --line: rgba(234, 242, 249, 0.12);
  --line-strong: rgba(234, 242, 249, 0.24);
  --navy-on-bg: #2f63ac;
  --hero-flower: 0.5;
  --nav-bg: rgba(8, 17, 28, 0.6);
  background: radial-gradient(120% 120% at 70% 0%, #0a1525 0%, #06101a 70%);
  color: var(--ink);
}