/* =====================================================
   P77 App — Design Tokens
   ===================================================== */
:root {
  /* ── Palette ── */
  --clr-bg-deep:       #0d0d12;   /* page background */
  --clr-bg-card:       #16161f;   /* card / panel background */
  --clr-bg-nav:        #111118;   /* nav bar */
  --clr-bg-elevated:   #1e1e2b;   /* raised panels / inputs */
  --clr-accent-gold:   #f0b941;   /* primary accent — neon amber/gold */
  --clr-accent-gold-2: #ffd97a;   /* lighter gold for gradients */
  --clr-accent-glow:   #f0b94133; /* gold at 20% opacity for glows */
  --clr-accent-red:    #e0402b;   /* secondary CTA accent */
  --clr-accent-red-2:  #7a1a12;   /* deep red for gradients */
  --clr-text-primary:  #f5f5f0;   /* headings */
  --clr-text-secondary:#a8a8b8;   /* body / meta */
  --clr-text-muted:    #5a5a6e;   /* placeholder / disabled */
  --clr-border:        #2a2a38;   /* subtle borders */
  --clr-success:       #33c26b;
  --clr-white:         #ffffff;

  /* ── Typography ── */
  --font-display: 'Rajdhani', sans-serif;         /* headings — sharp, techy */
  --font-body:    'Inter', sans-serif;            /* body — clean readable */
  --font-mono:    'JetBrains Mono', monospace;    /* badges / tags */

  --fs-xs:   0.75rem;   /* 12px */
  --fs-sm:   0.875rem;  /* 14px */
  --fs-base: 1rem;      /* 16px */
  --fs-lg:   1.125rem;  /* 18px */
  --fs-xl:   1.375rem;  /* 22px */
  --fs-2xl:  1.75rem;   /* 28px */
  --fs-3xl:  2.25rem;   /* 36px */
  --fs-4xl:  3rem;      /* 48px */
  --fs-hero: clamp(2.5rem, 6vw, 5rem);

  --fw-regular: 400;
  --fw-medium:  500;
  --fw-semibold:600;
  --fw-bold:    700;

  /* ── Spacing ── */
  --sp-xs:  0.25rem;
  --sp-sm:  0.5rem;
  --sp-md:  1rem;
  --sp-lg:  1.5rem;
  --sp-xl:  2rem;
  --sp-2xl: 3rem;
  --sp-3xl: 4.5rem;
  --sp-4xl: 6rem;

  /* ── Effects ── */
  --radius-sm:  6px;
  --radius-md:  12px;
  --radius-lg:  20px;
  --radius-pill:9999px;

  --shadow-card: 0 4px 24px rgba(0,0,0,0.5);
  --shadow-glow: 0 0 20px var(--clr-accent-glow);
  --shadow-gold: 0 8px 28px rgba(240,185,65,0.28);

  --gradient-gold: linear-gradient(135deg, var(--clr-accent-gold-2), var(--clr-accent-gold));
  --gradient-panel: linear-gradient(160deg, #16161f 0%, #0d0d12 100%);

  --transition-fast:   150ms ease;
  --transition-normal: 280ms ease;

  /* ── Layout ── */
  --max-width: 1280px;
  --nav-height: 68px;
}