/* ==========================================================================
   GeniePass design tokens - "Midnight Genie"

   Near-black charcoal base with warm amber-gold accent — evoking a genie lamp
   glowing in the dark. Deliberately NOT the typical AI-store navy+teal combo.
   Every colour, size, shadow and timing in the app resolves to one of these.
   ========================================================================== */

:root {
  color-scheme: dark;

  /* ------------------------------- surfaces -------------------------------
     Charcoal-to-warm-black ramp. Warmer than pure navy — has a slight brown
     undertone so it reads as "luxury dark" not "corporate dashboard". */
  --bg: #0c0a09;
  --bg-deep: #070605;
  --surface: #1c1917;
  --surface-2: #292524;
  --surface-3: #3d3632;
  --surface-glass: rgba(28, 25, 23, 0.72);
  --surface-glass-2: rgba(255, 247, 237, 0.05);

  /* -------------------------------- accent --------------------------------
     Warm amber-gold. Like light from a genie lamp. This is what makes
     GeniePass look like GeniePass and not every other AI store. */
  --accent: #f59e0b;
  --accent-strong: #d97706;
  --accent-soft: #fbbf24;
  --accent-wash: rgba(245, 158, 11, 0.1);
  --accent-line: rgba(245, 158, 11, 0.3);
  --text-on-accent: #1c1004;

  --whatsapp: #25d366;
  --whatsapp-ink: #04240f;

  /* --------------------------------- text ---------------------------------
     Warm-toned whites and greys. Slight amber undertone so text feels like
     it's lit by lamplight, not fluorescent office lighting. */
  --text: #faf5ef;
  --text-2: #c4b5a4;
  --text-muted: #8c7e6f;
  --text-faint: #6b5f52;

  /* -------------------------------- status --------------------------------
     Tuned to sit on warm charcoal rather than cold navy. */
  --ok: #4ade80;
  --ok-wash: rgba(74, 222, 128, 0.1);
  --warn: #fbbf24;
  --warn-wash: rgba(251, 191, 36, 0.1);
  --warn-ink: #2e2003;
  --danger: #f87171;
  --danger-wash: rgba(248, 113, 113, 0.1);

  /* -------------------------------- borders -------------------------------
     Warm-tinted hairlines. Pure white alphas look cold on charcoal. */
  --hairline: rgba(255, 240, 220, 0.08);
  --hairline-strong: rgba(255, 240, 220, 0.15);
  --hairline-faint: rgba(255, 240, 220, 0.04);

  /* ------------------------------ elevation ------------------------------
     Warm-neutral shadows. The inset-top highlight uses a warm white to
     simulate lamplight catching the top edge of a surface. */
  --inset-top: inset 0 1px 0 rgba(255, 245, 230, 0.08);
  --inner-vignette: inset 0 -40px 40px -24px rgba(12, 10, 9, 0.5);
  --shadow-sm: 0 1px 2px rgba(12, 10, 9, 0.5);
  --shadow-lift: 0 18px 44px -20px rgba(12, 10, 9, 0.8);
  --shadow-hover: 0 20px 46px -18px rgba(12, 10, 9, 0.85);
  --shadow-modal: 0 44px 120px -32px rgba(12, 10, 9, 0.9);
  /* Amber-gold glow on CTA buttons — the genie lamp effect. */
  --shadow-cta: 0 10px 28px -12px rgba(245, 158, 11, 0.4);

  /* ------------------------------ typography ------------------------------ */
  --font-display: 'Plus Jakarta Sans', ui-sans-serif, system-ui, sans-serif;
  --font-body: 'IBM Plex Sans', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, 'SFMono-Regular', Consolas, monospace;

  --fs-xs: 0.75rem;
  --fs-sm: 0.8125rem;
  --fs-base: 0.9375rem;
  --fs-md: 1rem;
  --fs-lg: 1.125rem;
  --fs-xl: 1.375rem;
  --fs-2xl: 1.75rem;
  --fs-3xl: 2.25rem;
  --fs-hero: clamp(2.5rem, 7vw, 4.5rem);
  --fs-section: clamp(1.875rem, 4vw, 2.875rem);
  --fs-price: clamp(1.75rem, 3vw, 2.125rem);

  --lh-tight: 1.05;
  --lh-snug: 1.25;
  --lh-body: 1.65;
  --ls-tight: -0.03em;
  --ls-wide: 0.14em;

  /* -------------------------------- 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;
  --sp-9: 96px;
  --sp-10: 128px;

  /* --------------------------------- radii -------------------------------- */
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 18px;
  --r-xl: 26px;
  --r-pill: 999px;

  /* -------------------------------- motion -------------------------------- */
  --t-fast: 160ms;
  --t-mid: 280ms;
  --t-slow: 520ms;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);

  /* -------------------------------- layout -------------------------------- */
  --container: 1200px;
  --container-pad: var(--sp-5);
  --nav-h: 64px;

  /* ------------------------------- z-index -------------------------------- */
  --z-nav: 100;
  --z-toast: 200;
  --z-modal: 300;
  --z-lightbox: 400;
}

@media (min-width: 900px) {
  :root {
    --container-pad: var(--sp-6);
  }
}