/* ═══════════════════════════════════════════════════════
   RewardTalks Design System — Premium Fintech/Travel
   ANTI-GENERIC RULES BAKED IN:
   - No random gradients — only brand-coherent ones
   - No overstuffed cards — generous whitespace
   - Tight letter-spacing on headings for editorial polish
   - Muted secondary text — not harsh gray
   - Disciplined color use — primary blue + gold accent only
   ═══════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap');

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; font-size: 16px; }

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  line-height: 1.6; color: var(--text-primary); background: var(--bg-primary);
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  transition: background-color 0.25s ease, color 0.25s ease;
  font-feature-settings: 'cv01', 'cv02', 'cv03', 'cv04';
  text-rendering: optimizeLegibility;
}

img, video { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }
ul, ol { list-style: none; }
table { border-collapse: collapse; }
input, textarea, select { font-family: inherit; font-size: inherit; }

/* ────────────────────────────────────────────────────────
   LIGHT THEME
   Premium restraint: blues limited to CTA and accent.
   Body text is near-black for maximum readability.
   Backgrounds are barely-there warm grays.
   ──────────────────────────────────────────────────────── */
:root {
  --brand-50: #EDF2FA;
  --brand-100: #C9D8EE;
  --brand-200: #93B0DD;
  --brand-300: #5D88CC;
  --brand-400: #2760BB;
  --brand-500: #003087;
  --brand-600: #002770;
  --brand-700: #001D54;
  --brand-800: #00133A;
  --brand-900: #000A20;

  --gold-50: #FDF8EC;
  --gold-100: #F9ECBE;
  --gold-200: #F3D87C;
  --gold-300: #ECC33B;
  --gold-400: #D4A853;
  --gold-500: #B8860B;

  --green-50: #E8F5EE;
  --green-100: #B8E4CE;
  --green-400: #00A65A;
  --green-500: #00875A;

  --red-50: #FEF2F2;
  --red-500: #DC2626;
  --orange-50: #FFF7ED;
  --orange-500: #EA580C;

  /* Neutral — warm undertone, not cold silicon gray */
  --gray-50: #FAFAFA;
  --gray-100: #F5F5F5;
  --gray-200: #EBEBEB;
  --gray-300: #D4D4D4;
  --gray-400: #A3A3A3;
  --gray-500: #737373;
  --gray-600: #525252;
  --gray-700: #404040;
  --gray-800: #262626;
  --gray-900: #171717;

  --text-primary: #171717;
  --text-secondary: #525252;
  --text-tertiary: #737373;
  --text-inverse: #FFFFFF;
  --text-brand: var(--brand-500);
  --text-link: var(--brand-500);
  --text-link-hover: var(--brand-600);

  --bg-primary: #FFFFFF;
  --bg-secondary: #FAFAFA;
  --bg-tertiary: #F5F5F5;
  --bg-brand: var(--brand-500);
  --bg-brand-subtle: var(--brand-50);
  --bg-gold-subtle: var(--gold-50);

  --border-primary: #EBEBEB;
  --border-secondary: #D4D4D4;
  --border-brand: var(--brand-200);

  /* Elevation — subtle, not dramatic */
  --shadow-xs: 0 1px 2px rgba(0,0,0,0.04);
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.03);
  --shadow-md: 0 4px 8px -2px rgba(0,0,0,0.06), 0 2px 4px -2px rgba(0,0,0,0.04);
  --shadow-lg: 0 12px 24px -4px rgba(0,0,0,0.08), 0 4px 8px -4px rgba(0,0,0,0.03);
  --shadow-xl: 0 24px 48px -12px rgba(0,0,0,0.1);
  --shadow-card-hover: 0 8px 24px -4px rgba(0,48,135,0.10), 0 2px 6px -2px rgba(0,0,0,0.04);

  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-2xl: 24px;
  --radius-full: 9999px;

  --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;

  --text-xs: 0.6875rem;   /* 11px */
  --text-sm: 0.8125rem;   /* 13px */
  --text-base: 0.875rem;  /* 14px */
  --text-md: 1rem;        /* 16px */
  --text-lg: 1.125rem;    /* 18px */
  --text-xl: 1.25rem;     /* 20px */
  --text-2xl: 1.5rem;     /* 24px */
  --text-3xl: 1.875rem;   /* 30px */
  --text-4xl: 2.25rem;    /* 36px */
  --text-5xl: 3rem;       /* 48px */
  --text-6xl: 3.75rem;    /* 60px */

  --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-base: 200ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 300ms cubic-bezier(0.4, 0, 0.2, 1);

  --container-xl: 1200px;
  --container-2xl: 1400px;
  --header-height: 56px;
  --sidebar-width: 260px;
}

/* ─── Dark Theme — desaturated, moody, not pitch black ─── */
[data-theme="dark"] {
  --text-primary: #EDEDED;
  --text-secondary: #A3A3A3;
  --text-tertiary: #737373;
  --text-inverse: #171717;
  --text-brand: #93B0DD;
  --text-link: #93B0DD;
  --text-link-hover: #C9D8EE;

  --bg-primary: #111111;
  --bg-secondary: #191919;
  --bg-tertiary: #222222;
  --bg-brand: #1A4FAA;
  --bg-brand-subtle: rgba(0,48,135,0.15);
  --bg-gold-subtle: rgba(212,168,83,0.08);

  --border-primary: #2A2A2A;
  --border-secondary: #3A3A3A;
  --border-brand: rgba(147,176,221,0.25);

  --shadow-xs: 0 1px 2px rgba(0,0,0,0.3);
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.4);
  --shadow-md: 0 4px 8px rgba(0,0,0,0.4);
  --shadow-lg: 0 12px 24px rgba(0,0,0,0.4);
  --shadow-xl: 0 24px 48px rgba(0,0,0,0.5);
  --shadow-card-hover: 0 8px 24px rgba(26,79,170,0.2);
}

/* ─── Typography — editorial precision ─── */
h1, h2, h3, h4, h5, h6 {
  font-weight: 700; line-height: 1.15;
  letter-spacing: -0.025em;
  color: var(--text-primary);
}
h1 { font-size: var(--text-5xl); font-weight: 800; letter-spacing: -0.035em; }
h2 { font-size: var(--text-3xl); font-weight: 800; letter-spacing: -0.03em; }
h3 { font-size: var(--text-xl); }
h4 { font-size: var(--text-md); font-weight: 600; letter-spacing: -0.01em; }
h5 { font-size: var(--text-base); font-weight: 600; }

p { color: var(--text-secondary); line-height: 1.65; font-size: var(--text-md); }

@media (max-width: 768px) {
  h1 { font-size: var(--text-3xl); }
  h2 { font-size: var(--text-2xl); }
}

/* ─── Focus ─── */
:focus-visible {
  outline: 2px solid var(--brand-400);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

/* ─── Scrollbar — barely visible ─── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--gray-300); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--gray-400); }
[data-theme="dark"] ::-webkit-scrollbar-thumb { background: var(--gray-600); }

::selection { background: var(--brand-200); color: var(--brand-900); }