/* ============================================================
   DESIGN TOKENS — The Points Planner
   ============================================================
   This file contains all design variables (colors, fonts,
   spacing) used across the site.

   STRUCTURE:
   - NEW TOKENS (top): The 2026 redesign system, based on the
     Figma file. Use these when writing new styles.
   - LEGACY TOKENS (bottom): Kept temporarily to support
     unmigrated sections. Will be removed once every section
     has been redesigned.

   WHEN EDITING:
   - Change a color/font in one place here, it updates
     everywhere that token is used across the site.
   - Always prefer NEW tokens over LEGACY tokens in new code.
   ============================================================ */

:root {
  /* ════════════════════════════════════════════════════════════
     NEW TOKENS (2026 REDESIGN)
     ════════════════════════════════════════════════════════════ */

  /* ── BACKGROUNDS ────────────────────────────────────────────── */
  --color-bg: #0A101F;              /* Main dark navy background */
  --color-bg-footer: #000000;       /* Pure black footer */
  --color-bg-radial-center: rgba(10, 16, 31, 0);     /* Center of hero radial gradient */
  --color-bg-radial-edge: #0A101F;                   /* Edge of hero radial gradient */

  /* ── ACCENT (orange) ────────────────────────────────────────── */
  --color-accent: #E9681E;          /* Primary CTA, highlights, "Points", number circles */
  --color-accent-hover: #D15A15;    /* Darker shade for hover (derived ~10% darker) */

  /* ── TEXT ───────────────────────────────────────────────────── */
  --color-text: #FFFFFF;            /* Primary text on dark backgrounds */
  --color-text-muted: #D4D4D4;      /* Secondary / muted text */
  --color-text-dark: #000000;       /* Text on light (green) backgrounds */

  /* ── STATUS / UTILITY ───────────────────────────────────────── */
  --color-success: #19A249;         /* Checkmarks, success states */
  --color-success-bg: #E7F2DD;      /* Pale green highlighted column in comparison table */

  /* ── SURFACES (glass cards) ─────────────────────────────────── */
  --color-card-bg: rgba(52, 52, 52, 0.30);           /* Frosted glass stat/testimonial cards */
  --color-card-border: rgba(125, 125, 125, 0.2);     /* Nearly invisible hairline border */
  --color-border-dark: #222B3F;                      /* Sidebar dividers, active nav pill bg */
  --color-number-green: #6CFF5E;                     /* Stat card green number ($621) */
  --card-blur: blur(2px);                            /* Backdrop filter for glass effect */

  /* ── TYPOGRAPHY ─────────────────────────────────────────────── */
  --font-primary: 'Inter', sans-serif;
  --fw-normal: 400;
  --fw-medium: 500;
  --fw-semibold: 600;

  /* Font sizes (from Figma) */
  --fs-hero: 40px;                  /* Hero headline */
  --fs-section: 30px;               /* Section headlines */
  --fs-logo: 18px;                  /* Logo wordmark */
  --fs-body: 14px;                  /* Body text, nav, buttons, eyebrows */

  /* Line heights */
  --lh-tight: 1.1;                  /* Headlines */
  --lh-body: 1.43;                  /* ~20px on 14px body (142.857%) */

  /* ── SPACING SCALE ──────────────────────────────────────────── */
  --space-xs: 8px;
  --space-sm: 14px;
  --space-md: 20px;
  --space-lg: 30px;
  --space-xl: 60px;

  /* ── RADIUS ─────────────────────────────────────────────────── */
  --radius-sm: 16px;                /* Comparison column, small cards */
  --radius-md: 18px;                /* Stat cards, testimonial cards */
  --radius-pill: 100px;             /* Buttons, number circles */

  /* ── BUTTON ─────────────────────────────────────────────────── */
  --btn-padding-y: 8px;
  --btn-padding-x: 16px;


  /* ════════════════════════════════════════════════════════════
     LEGACY TOKENS
     ────────────────────────────────────────────────────────────
     These support sections of the site that haven't been
     redesigned yet. As we redesign each section, its styles
     will stop using these and switch to the new tokens above.
     This block will be deleted once the redesign is complete.
     ════════════════════════════════════════════════════════════ */

  /* ── DARK SURFACES (legacy) ─────────────────────────────────── */
  --night: #0a0d12;
  --night-2: #0f1420;
  --night-3: #161e2e;
  --glass: rgba(255, 255, 255, 0.04);
  --glass-border: rgba(255, 255, 255, 0.08);
  --glass-hover: rgba(255, 255, 255, 0.07);

  /* ── ACCENT (legacy silver-platinum) ────────────────────────── */
  --gold: #8892a4;
  --gold-light: #fff;
  --gold-glow: rgba(194, 207, 224, 0.2);

  /* ── PAGE BACKGROUNDS (legacy) ──────────────────────────────── */
  --cream: #f8f9fb;
  --cream-2: #f2f4f7;

  /* ── TEXT (legacy) ──────────────────────────────────────────── */
  --ink: #111827;
  --muted-dark: rgba(255, 255, 255, 0.6);
  --muted-light: #6b7280;
  --border-light: #e5e7eb;

  /* ── STATUS COLORS (legacy) ─────────────────────────────────── */
  --green: #1a6b3c;
  --green-light: #dcfce7;
  --red: #c0392b;

  /* ── MODAL ELEMENTS (legacy) ────────────────────────────────── */
  --step-circle-color: #5DADE2;

  /* ── TYPOGRAPHY (legacy) ────────────────────────────────────── */
  --font-display: 'Be Vietnam Pro', sans-serif;
  --font-body: 'Be Vietnam Pro', sans-serif;
  --font-mono: 'Be Vietnam Pro', sans-serif;
}