/* ============================================
   NEXiiO — Elegant Modern Design Tokens
   tokens.css — must load BEFORE style.css
   ============================================ */
:root {
  /* Surfaces — warm elegant paper */
  --bg: #FCFCF9;
  --bg-2: #F6F6F1;
  --surface: #FFFFFF;
  --surface-soft: #F9F9F7;
  --surface-muted: #F2F0EB;
  --ink: #121417;
  --ink-2: #2B3036;
  --muted: #8A8F98;
  --muted-2: #B0B5BD;
  --line: rgba(18,20,23,.07);
  --line-strong: rgba(18,20,23,.11);
  --line-accent: rgba(255,107,46,.18);

  /* Accent — restrained vermilion */
  --accent: #FF6B2E;
  --accent-hover: #E85E27;
  --accent-soft: #FFF1EB;
  --accent-2: #FF8656;
  --accent-ink: #FFFFFF;

  /* Semantic */
  --success: #1a7f4b;
  --danger: #d92d20;

  /* Typography — fluid elegant scale */
  --font-display: "IRANYekan", ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  --font-body: "IRANYekan", ui-sans-serif, system-ui, sans-serif;
  --text-xs: clamp(10px, .65vw, 11px);
  --text-sm: clamp(12px, .75vw, 13px);
  --text-base: clamp(13px, .85vw, 15px);
  --text-md: clamp(14px, .95vw, 16px);
  --text-lg: clamp(18px, 1.35vw, 22px);
  --text-xl: clamp(22px, 1.9vw, 30px);
  --text-2xl: clamp(28px, 2.8vw, 44px);
  --text-hero: clamp(30px, 3.5vw, 56px);
  --leading-tight: 1.15;
  --leading-normal: 1.7;
  --leading-relaxed: 1.95;

  /* Space */
  --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;

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

  /* Shadows — soft elegant depth */
  --shadow-xs: 0 1px 2px rgba(18,20,23,.05);
  --shadow-sm: 0 1px 3px rgba(18,20,23,.06), 0 4px 16px rgba(18,20,23,.05);
  --shadow-md: 0 4px 20px rgba(18,20,23,.08), 0 12px 32px rgba(18,20,23,.06);
  --shadow-lg: 0 12px 40px rgba(18,20,23,.12), 0 32px 64px rgba(18,20,23,.08);
  --shadow-accent: 0 8px 24px rgba(255,107,46,.22);

  /* Motion */
  --ease-spring: cubic-bezier(.16,1,.3,1);
  --ease-out: cubic-bezier(.25,.46,.45,.94);
  --ease-in-out: cubic-bezier(.4,0,.2,1);
  --dur-fast: 160ms;
  --dur: 340ms;
  --dur-slow: 640ms;
  --dur-hero: 900ms;

  /* Header */
  --header-h: 72px;
  --header-h-sm: 60px;
  --container-max: 1280px;
  --container-wide: 1440px;

  /* Legacy alias fixes */
  --main-bg-color: var(--bg);
  --orange-color: var(--accent);
  --light-color: var(--muted);
  --dark-color: var(--surface-muted);
  --white-color: var(--ink);
  --opacity-color: var(--line);
}

/* Dark footer tokens */
:root {
  --footer-bg: #0E1114;
  --footer-bg-2: #15181C;
  --footer-ink: #E8EAED;
  --footer-muted: #9AA0A8;
  --footer-line: rgba(255,255,255,.08);
}

/* Selection */
::selection { background: var(--accent); color: #fff; }