/* ==========================================================================
   Falcon Eye — design tokens v2
   Shared by the website, mobile app and pitch deck.
   Dark is the default theme. Set <html data-theme="light"> for light.
   ========================================================================== */

@font-face { font-family: "Montserrat"; src: url("fonts/Montserrat.ttf") format("truetype"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Alexandria"; src: url("fonts/Alexandria.ttf") format("truetype"); font-weight: 100 900; font-display: swap; }

:root {
  /* ---- brand palette (fixed in both themes) ---- */
  --fe-obsidian: #0A0D0F;   /* Obsidian Black — primary */
  --fe-graphite: #171C20;   /* Graphite — secondary */
  --fe-lime: #B9FF38;       /* Falcon Lime — the one accent */
  --fe-offwhite: #F3F5F2;   /* Off White — text / light */
  --fe-steel: #7B858B;      /* Steel Gray — neutral */

  /* ---- neutral scale ---- */
  --n-0: #FFFFFF;
  --n-50: #F3F5F2;
  --n-100: #E9ECE8;
  --n-200: #D9DED9;
  --n-300: #BFC6C9;
  --n-400: #9AA3A8;
  --n-500: #7B858B;
  --n-600: #5B6469;
  --n-700: #2E373D;
  --n-800: #1F262B;
  --n-850: #171C20;
  --n-900: #0F1316;
  --n-950: #0A0D0F;

  /* ---- lime scale (fills only — never lime text on light) ---- */
  --lime-100: #F1FFD6;
  --lime-200: #E0FFA6;
  --lime-300: #CEFF70;
  --lime-400: #B9FF38;
  --lime-500: #A3EB1F;
  --lime-600: #86C70F;

  /* ---- type ---- */
  --font-latin: "Montserrat", system-ui, sans-serif;
  --font-arabic: "Alexandria", "Montserrat", system-ui, sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, monospace;
  --font: var(--font-latin);
  --fs-display: clamp(40px, 6vw, 76px);
  --fs-h1: clamp(30px, 4vw, 46px);
  --fs-h2: 28px;
  --fs-h3: 20px;
  --fs-h4: 16px;
  --fs-body: 16px;
  --fs-small: 14px;
  --fs-caption: 12px;
  --lh-tight: 1.15;
  --lh-body: 1.65;
  --tracking-caps: 0.14em;
  --tracking-tag: 0.6em;

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

  /* ---- radius ---- */
  --r-xs: 4px;
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 20px;
  --r-pill: 999px;

  /* ---- motion ---- */
  --dur-instant: 80ms;   /* press feedback */
  --dur-fast: 150ms;     /* hovers, toggles */
  --dur-base: 240ms;     /* panels, tabs, toasts */
  --dur-slow: 420ms;     /* page reveals */
  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-snap: cubic-bezier(0.3, 1.4, 0.5, 1);   /* small overshoot: switches, the replay button */

  /* ---- layers ---- */
  --z-sticky: 10; --z-dropdown: 20; --z-modal: 40; --z-toast: 50; --z-tooltip: 60;

  /* ---- semantic: DARK (default) ---- */
  --bg: var(--n-950);
  --surface: var(--n-850);
  --surface-2: var(--n-800);
  --surface-hover: #242C31;
  --border: #262E34;
  --border-strong: var(--n-700);
  --text: var(--n-50);
  --text-muted: var(--n-400);
  --text-subtle: var(--n-500);
  --accent: var(--lime-400);
  --accent-hover: var(--lime-300);
  --accent-press: var(--lime-500);
  --on-accent: var(--n-950);
  --accent-text: var(--lime-400);
  --focus: var(--lime-400);
  --success: var(--lime-400);
  --warning: #F5B83D;
  --danger: #FF5A4E;
  --info: #8EC5FF;
  --live: #FF5A4E;
  --overlay: rgb(5 7 8 / 0.72);
  --shadow-1: 0 1px 2px rgb(0 0 0 / 0.4);
  --shadow-2: 0 8px 24px rgb(0 0 0 / 0.45);
  --shadow-3: 0 24px 64px rgb(0 0 0 / 0.55);
  --silver: linear-gradient(160deg, #F6F8F5 0%, #8C959A 100%);
  color-scheme: dark;
}

:root[lang="ar"], [lang="ar"] { --font: var(--font-arabic); }

/* ---- semantic: LIGHT ---- */
:root[data-theme="light"] {
  --bg: var(--n-50);
  --surface: var(--n-0);
  --surface-2: var(--n-100);
  --surface-hover: #EEF1ED;
  --border: var(--n-200);
  --border-strong: var(--n-300);
  --text: var(--n-850);
  --text-muted: var(--n-600);
  --text-subtle: var(--n-500);
  --accent-text: var(--n-850);   /* lime is unreadable as text on light */
  --focus: var(--n-850);
  --warning: #8A5300;
  --danger: #B42318;
  --info: #1F5FAD;
  --live: #D92D20;
  --overlay: rgb(10 13 15 / 0.45);
  --shadow-1: 0 1px 2px rgb(10 13 15 / 0.06);
  --shadow-2: 0 8px 24px rgb(10 13 15 / 0.08);
  --shadow-3: 0 24px 64px rgb(10 13 15 / 0.16);
  --silver: linear-gradient(160deg, #2B3237 0%, #5F696F 100%);
  color-scheme: light;
}