/* =============================================================================
   بادبان — Design tokens
   Ported verbatim from "Baadbaan design system/tokens/*.css".
   Only change: Vazirmatn is served from local files under assets/fonts/
   instead of the pinned jsDelivr URLs, so the site has no external dependency.
   ============================================================================= */

/* --- Fonts ---------------------------------------------------------------- */
@font-face {
  font-family: 'Vazirmatn';
  src: url('../fonts/Vazirmatn-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Vazirmatn';
  src: url('../fonts/Vazirmatn-Medium.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Vazirmatn';
  src: url('../fonts/Vazirmatn-SemiBold.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Vazirmatn';
  src: url('../fonts/Vazirmatn-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Vazirmatn';
  src: url('../fonts/Vazirmatn-ExtraBold.woff2') format('woff2');
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

:root {
  --font-family: 'Vazirmatn', 'Segoe UI', Tahoma, sans-serif;
}

/* --- Color ---------------------------------------------------------------- */
:root {
  /* Navy (primary brand, hero/dark surfaces) */
  --navy-950: #081733;
  --navy-900: #0b1e3d;
  --navy-800: #122a52;
  --navy-700: #1a3868;
  --navy-600: #234a86;

  /* Brand blue (buttons, links, active states, sail gradient) */
  --blue-700: #1e56c4;
  --blue-600: #2f6feb;
  --blue-500: #4c86f2;
  --blue-100: #e5eefd;
  --blue-50: #f2f7fe;

  /* Teal (secondary accent — icons, mission graphics, positive highlights) */
  --teal-700: #0e7a72;
  --teal-600: #17a398;
  --teal-500: #35bcae;
  --teal-100: #e2f6f3;
  --teal-50: #eefaf8;

  /* Graphite (from the sail mark's dark triangle — sparing use) */
  --graphite-700: #362e28;
  --graphite-600: #4b4038;
  --graphite-400: #7a6f66;

  /* Semantic status */
  --green-600: #178a4c;
  --green-100: #e3f6ea;
  --red-600: #dc2626;
  --red-100: #fbe7e7;
  --amber-600: #b7791f;
  --amber-100: #fbf1dd;

  /* Neutrals */
  --ink-900: #101828;
  --ink-700: #344054;
  --ink-500: #667085;
  --ink-300: #d0d5dd;
  --ink-200: #e4e7ec;
  --ink-100: #f0f2f5;
  --ink-50: #f7f8fa;
  --white: #ffffff;

  /* Semantic aliases */
  --bg-page: var(--white);
  --bg-surface-alt: var(--ink-50);
  --bg-hero: linear-gradient(135deg, var(--navy-900) 0%, var(--navy-950) 60%, var(--navy-800) 100%);
  --bg-band-dark: var(--navy-900);
  --bg-tint-blue: var(--blue-50);
  --bg-tint-teal: var(--teal-50);

  --text-primary: var(--ink-900);
  --text-secondary: var(--ink-700);
  --text-muted: var(--ink-500);
  --text-on-dark: #ffffff;
  --text-on-dark-muted: #b7c2d9;
  --text-brand: var(--blue-600);
  --text-accent: var(--teal-600);

  --border-default: var(--ink-200);
  --border-strong: var(--ink-300);
  --border-on-dark: rgba(255, 255, 255, 0.14);

  --brand-primary: var(--blue-600);
  --brand-primary-hover: var(--blue-700);
  --brand-secondary: var(--teal-600);
  --brand-secondary-hover: var(--teal-700);

  --status-success: var(--green-600);
  --status-danger: var(--red-600);
  --status-warning: var(--amber-600);
}

/* --- Typography ----------------------------------------------------------- */
:root {
  --text-display-1: 700 56px/1.25 var(--font-family);
  --text-display-2: 700 44px/1.28 var(--font-family);
  --text-h1: 700 36px/1.3 var(--font-family);
  --text-h2: 700 28px/1.35 var(--font-family);
  --text-h3: 600 22px/1.4 var(--font-family);
  --text-h4: 600 18px/1.45 var(--font-family);
  --text-body-lg: 400 19px/1.7 var(--font-family);
  --text-body: 400 16px/1.7 var(--font-family);
  --text-body-sm: 400 14px/1.6 var(--font-family);
  --text-caption: 500 12px/1.5 var(--font-family);
  --text-button: 600 16px/1 var(--font-family);
  --text-stat: 700 40px/1.1 var(--font-family);

  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-extrabold: 800;

  --letter-spacing-tight: -0.01em;
}

/* --- Effects: spacing, radius, shadow, motion, layout --------------------- */
:root {
  --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-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-xl: 22px;
  --radius-pill: 999px;

  --shadow-xs: 0 1px 2px rgba(16, 24, 40, 0.06);
  --shadow-sm: 0 2px 8px rgba(16, 24, 40, 0.08);
  --shadow-md: 0 8px 24px rgba(16, 24, 40, 0.10);
  --shadow-lg: 0 16px 48px rgba(9, 20, 45, 0.16);
  --shadow-navy-glow: 0 20px 60px rgba(11, 30, 61, 0.35);

  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --duration-fast: 140ms;
  --duration-base: 220ms;
  --duration-slow: 360ms;

  --container-max: 1280px;
  --header-height: 84px;
}

/* --- Base reset ----------------------------------------------------------- */
* { box-sizing: border-box; }

html {
  direction: rtl;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--bg-page);
  color: var(--text-primary);
  font: var(--text-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-wrap: pretty;
}

a { color: var(--text-brand); text-decoration: none; }
a:hover { color: var(--brand-primary-hover); text-decoration: underline; }

h1, h2, h3, h4, h5, h6, p { margin: 0; }
ul, ol { margin: 0; padding: 0; }

button, input, select, textarea { font-family: inherit; }
img, svg { max-width: 100%; }
img { height: auto; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}