/* =========================================================
   Safety Pay — Design Tokens  v2.0  Navy + Gold rebrand
   Palette: Navy #121926 bg · Gold #CEA963 accent · Off-white #E8EDF2 text
   ========================================================= */

:root {
  /* ===== Core Palette: Navy + Gold ===== */
  --bg-0: #121926;            /* navy — main background */
  --bg-1: #151E2C;            /* base canvas */
  --bg-2: #1A2434;            /* card base */
  --bg-3: #1E2B3D;            /* elevated card */
  --bg-4: #243347;            /* hover state */

  /* Glass layers — navy-tinted */
  --glass-1: rgba(26, 36, 52, 0.85);
  --glass-2: rgba(26, 36, 52, 0.95);
  --glass-3: rgba(18, 25, 38, 0.60);
  --glass-stroke: rgba(255, 255, 255, 0.06);
  --glass-stroke-strong: rgba(206, 169, 99, 0.20);
  --glass-highlight: rgba(255, 255, 255, 0.06);

  /* Text — off-white on navy (WCAG AA) */
  --text-0: #E8EDF2;          /* high emphasis — off-white */
  --text-1: #C5CDD9;          /* medium */
  --text-2: #8A94A6;          /* low / hint / labels */
  --text-3: #6B7585;          /* disclaimer / disabled */
  --hint:   #8A94A6;

  /* Brand gold (names kept so styles.css doesn't need changes) */
  --brand-purple-1: #CEA963;
  --brand-purple-2: #EFD189;
  --brand-purple-3: #FCE088;
  --brand-violet:   #BF9F60;
  --brand-indigo:   #A8884A;

  --brand-teal-1: #EFD189;    /* gold light — links/accents */
  --brand-teal-2: #FCE088;
  --brand-cyan:   #CEA963;

  /* Accents */
  --accent-gold-1: #CEA963;   /* primary gold */
  --accent-gold-2: #BF9F60;   /* darker gold */
  --accent-amber:  #A8884A;   /* deep gold */
  --accent-rose:   #ffb4ab;
  --accent-red:    #ff5449;
  --accent-neon-green: #22c55e;  /* success green — kept */
  --accent-neon-lime:  #EFD189;

  /* Semantic */
  --success: #22c55e;
  --warning: #CEA963;
  --danger:  #ff5449;
  --info: #22c55e;
  --pending: #EFD189;

  /* Gradients — gold brand */
  --grad-brand: linear-gradient(135deg, #BF9F60 0%, #CEA963 40%, #EFD189 100%);
  --grad-brand-soft: linear-gradient(135deg, rgba(206,169,99,0.9) 0%, rgba(191,159,96,0.8) 100%);
  --grad-violet: linear-gradient(135deg, #BF9F60 0%, #CEA963 70%, #EFD189 100%);
  --grad-gold: linear-gradient(135deg, #BF9F60 0%, #CEA963 45%, #EFD189 100%);
  --grad-fire: linear-gradient(135deg, #ff5449 0%, #CEA963 50%, #EFD189 100%);
  --grad-cyan: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
  --grad-success: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
  --grad-danger: linear-gradient(135deg, #ff5449 0%, #ffb4ab 100%);
  --grad-hero-bg: radial-gradient(ellipse 80% 50% at 50% -10%, rgba(206,169,99,0.12), transparent 60%),
                  radial-gradient(ellipse 60% 40% at 100% 20%, rgba(191,159,96,0.08), transparent 60%),
                  radial-gradient(ellipse 60% 40% at 0% 60%, rgba(34,197,94,0.04), transparent 60%),
                  linear-gradient(180deg, #121926 0%, #0D1520 100%);

  /* ===== Typography ===== */
  --font-sans: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text",
               "Inter", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, "SF Mono", "JetBrains Mono", "Menlo", Consolas, monospace;
  --font-display: "SF Pro Display", -apple-system, BlinkMacSystemFont, "Inter", sans-serif;

  /* Scale */
  --fs-11: 11px;
  --fs-13: 13px;
  --fs-15: 15px;
  --fs-17: 17px;
  --fs-20: 20px;
  --fs-24: 24px;
  --fs-32: 32px;
  --fs-44: 44px;

  /* Weights */
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-heavy: 800;

  /* Tracking */
  --tracking-tight: -0.022em;
  --tracking-snug: -0.014em;
  --tracking-normal: 0;
  --tracking-wide: 0.04em;
  --tracking-caps: 0.08em;

  /* ===== Spacing ===== */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;
  --sp-8: 64px;

  /* ===== Radii ===== */
  --r-1: 8px;
  --r-2: 12px;
  --r-3: 16px;
  --r-4: 20px;
  --r-5: 24px;
  --r-pill: 999px;

  /* ===== Shadows ===== */
  --sh-1: 0 1px 2px rgba(0,0,0,0.5), 0 1px 1px rgba(0,0,0,0.3);
  --sh-2: 0 8px 24px -8px rgba(0,0,0,0.6), 0 2px 6px rgba(0,0,0,0.35);
  --sh-3: 0 24px 60px -16px rgba(0,0,0,0.65), 0 8px 18px rgba(0,0,0,0.40);
  --sh-glass: 0 8px 32px rgba(0,0,0,0.55), inset 0 1px 0 rgba(255,255,255,0.04);

  /* Gold glows — subtle, not neon */
  --glow-purple: 0 0 20px rgba(206,169,99,0.25), 0 0 40px rgba(191,159,96,0.12);
  --glow-teal:   0 0 20px rgba(239,209,137,0.22), 0 0 40px rgba(206,169,99,0.10);
  --glow-gold:   0 0 20px rgba(206,169,99,0.30), 0 0 40px rgba(206,169,99,0.12);
  --glow-green:  0 0 24px rgba(34,197,94,0.42), 0 0 56px rgba(34,197,94,0.18);
  --glow-red:    0 0 24px rgba(255,84,73,0.45);

  /* ===== Motion ===== */
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-decelerate: cubic-bezier(0, 0, 0.2, 1);
  --ease-accelerate: cubic-bezier(0.4, 0, 1, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-overshoot: cubic-bezier(0.68, -0.55, 0.27, 1.55);

  --dur-fast: 120ms;
  --dur-base: 220ms;
  --dur-slow: 360ms;
  --dur-page: 480ms;

  /* ===== Layout ===== */
  --tabbar-h: 68px;
  --topbar-h: 56px;
  --safe-b: env(safe-area-inset-bottom);
  --safe-t: env(safe-area-inset-top);
}

/* ===== Light theme override ===== */
.theme-light {
  --bg-0: #f0f4f8;
  --bg-1: #ffffff;
  --bg-2: #e8edf5;
  --bg-3: #dde4f0;
  --bg-4: #d0daea;

  --glass-1: rgba(255, 255, 255, 0.75);
  --glass-2: rgba(255, 255, 255, 0.90);
  --glass-3: rgba(240, 244, 248, 0.65);
  --glass-stroke: rgba(18, 25, 38, 0.10);
  --glass-stroke-strong: rgba(191, 159, 96, 0.35);
  --glass-highlight: rgba(255, 255, 255, 0.70);

  --text-0: #121926;
  --text-1: #2A3A52;
  --text-2: #5A6880;
  --text-3: #8A94A6;

  --grad-hero-bg: radial-gradient(ellipse 80% 50% at 50% -10%, rgba(206,169,99,0.14), transparent 60%),
                  radial-gradient(ellipse 60% 40% at 100% 20%, rgba(191,159,96,0.10), transparent 60%),
                  linear-gradient(180deg, #f0f4f8 0%, #e8edf5 100%);

  --sh-1: 0 1px 2px rgba(18,25,38,0.07);
  --sh-2: 0 8px 24px -8px rgba(18,25,38,0.13);
  --sh-3: 0 24px 60px -16px rgba(18,25,38,0.20);
  --sh-glass: 0 8px 32px rgba(18,25,38,0.08), inset 0 1px 0 rgba(255,255,255,0.65);
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 0ms;
    --dur-base: 0ms;
    --dur-slow: 0ms;
    --dur-page: 0ms;
  }
}