/* FAST-VID sitewide design tokens.
   Canonical palette and shared primitives. Load before page-specific CSS. */
:root {
  /* Brand palette */
  --color-navy: #172B3A;
  --color-blue: #3563E9;
  --color-blue-strong: #244BC4;
  --color-blue-soft: #E8EEFF;
  --color-ice: #F1F4F8;
  --color-white: #FFFFFF;
  --color-blue-grey: #8294AA;

  /* Neutral text and surfaces */
  --color-text: var(--color-navy);
  --color-text-muted: #5B6B7D;
  --color-surface: var(--color-white);
  --color-surface-soft: #F8FAFC;
  --color-border: #DCE3EC;
  --color-border-strong: #C1CCDA;
  --color-error: #B42318;
  --color-focus: #1D4ED8;

  /* Compatibility aliases used by existing page styles */
  --bg: var(--color-ice);
  --surface: var(--color-surface);
  --surface-soft: var(--color-surface-soft);
  --ink: var(--color-text);
  --muted: var(--color-text-muted);
  --line: var(--color-border);
  --line-strong: var(--color-border-strong);
  --brand: var(--color-blue);
  --brand-strong: var(--color-blue-strong);
  --brand-soft: var(--color-blue-soft);
  --accent: var(--color-blue-soft);
  --accent-soft: var(--color-ice);
  --secondary: var(--color-blue-grey);
  --success: var(--color-blue);
  --error: var(--color-error);
  --focus: var(--color-focus);

  /* Typography */
  --font-sans: "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, "Noto Sans Arabic", Tahoma, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  --text-xs: 0.72rem;
  --text-sm: 0.84rem;
  --text-base: 1rem;
  --text-lg: 1.08rem;
  --text-xl: 1.28rem;
  --text-2xl: clamp(1.55rem, 3vw, 2.2rem);
  --text-display: clamp(2.35rem, 5vw, 4rem);
  --leading-tight: 1.15;
  --leading-body: 1.65;

  /* Spacing and shape */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-pill: 999px;
  --container: 1160px;
  --content-width: 1160px;
  --shadow-sm: 0 6px 18px rgba(23, 43, 58, 0.05);
  --shadow-md: 0 14px 36px rgba(23, 43, 58, 0.08);
  --transition-fast: 0.16s ease;

  /* Component aliases */
  --link-color: var(--brand);
  --link-hover-color: var(--brand-strong);
  --button-primary-bg: var(--brand);
  --button-primary-hover-bg: var(--brand-strong);
  --button-primary-text: var(--color-white);
  --input-bg: var(--surface);
  --input-border: var(--line-strong);
  --input-focus-ring: var(--brand-soft);
  --card-bg: var(--surface);
  --card-border: var(--line);
  --card-shadow: var(--shadow-sm);
  --nav-text: var(--muted);
  --nav-hover-bg: var(--brand-soft);
  --nav-active-bg: var(--brand-soft);
  --footer-bg: var(--surface);
  --footer-text: var(--muted);
  --footer-border: var(--line);
}

*,
*::before,
*::after { box-sizing: border-box; }
html { scroll-behavior: smooth; color-scheme: light; }
body {
  margin: 0;
  min-height: 100vh;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--leading-body);
  -webkit-font-smoothing: antialiased;
}
body::selection { background: var(--brand-soft); }
a { color: var(--brand); text-underline-offset: 0.18em; }
a:hover { color: var(--brand-strong); }
button,
input,
select,
textarea { font: inherit; }
button { cursor: pointer; }
button:disabled { cursor: not-allowed; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }