/**
 * Punzday Design Tokens
 * ---------------------------------------------------------------------------
 * Single source of truth. Every stylesheet reads these custom properties.
 *
 * Signature element: the "Groan-O-Meter" — a small wobbling corniness
 * rating shown on every pun card (1-5 groans). It's the one recurring,
 * unmistakably-Punzday motif: playful without being juvenile, and it
 * gives every card a reason to have personality without extra decoration.
 * ---------------------------------------------------------------------------
 */

:root{

  /* ---------- COLOR ---------- */
  --pz-yellow:        #FFD400; /* used ONLY for highlights + CTAs, per brief */
  --pz-yellow-600:    #E0B800;
  --pz-yellow-100:    #FFF6CC;

  --pz-accent:        #2563EB; /* secondary CTA / link accent, from refined brief */
  --pz-accent-600:    #1D4ED8;
  --pz-accent-100:    #E8EFFD;

  --pz-navy:          #0A1F44;
  --pz-navy-700:      #132B5E;
  --pz-navy-100:      #E8ECF4;

  --pz-white:         #FFFFFF;
  --pz-bg:            #FFFDF3; /* light background */
  --pz-bg-sunken:     #FBF6E4;

  --pz-text:          #16213A;
  --pz-text-muted:    #545F7D;
  --pz-text-faint:    #8790A6;

  --pz-border:        #E9E4D3;
  --pz-border-strong: #DCD5BD;

  --pz-success:       #1E9E6B;
  --pz-success-bg:    #E7F6EE;

  --pz-gray:          #F2F1EC;
  --pz-light-gray:    #F8FAFC; /* from refined brief, used for ad-slot backgrounds */

  --pz-focus:         #2F6FED;
  --pz-overlay:       rgba(10, 31, 68, 0.6);
  --pz-surface:       #FFFFFF;

  /* ---------- TYPOGRAPHY ---------- */
  /* Heading — Bricolage Grotesque: bold, a little irreverent, still a
     serious display face rather than a novelty font. */
  --pz-font-display: "Bricolage Grotesque", "Poppins", -apple-system, sans-serif;
  /* Body — Inter: maximum readability so the jokes land, not the font. */
  --pz-font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  --pz-fs-2xs:  0.75rem;
  --pz-fs-xs:   0.8125rem;
  --pz-fs-sm:   0.9375rem;
  --pz-fs-base: 1rem;
  --pz-fs-md:   1.25rem;
  --pz-fs-lg:   1.625rem;
  --pz-fs-xl:   2.125rem;
  --pz-fs-2xl:  2.75rem;
  --pz-fs-3xl:  3.5rem;

  --pz-lh-tight:  1.15;
  --pz-lh-snug:   1.35;
  --pz-lh-normal: 1.6;

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

  /* ---------- SPACING — 8px system ---------- */
  --pz-space-1: 0.25rem;
  --pz-space-2: 0.5rem;
  --pz-space-3: 0.75rem;
  --pz-space-4: 1rem;
  --pz-space-5: 1.5rem;
  --pz-space-6: 2rem;
  --pz-space-7: 2.5rem;
  --pz-space-8: 3rem;
  --pz-space-9: 4rem;
  --pz-space-10: 6rem;

  /* ---------- LAYOUT ---------- */
  --pz-container-max: 1200px;
  --pz-container-narrow: 720px;
  --pz-header-height: 72px;
  --pz-header-height-shrunk: 56px;

  /* ---------- RADIUS ---------- */
  --pz-radius-sm: 8px;
  --pz-radius-md: 14px;
  --pz-radius-lg: 22px;
  --pz-radius-pill: 999px;

  /* ---------- SHADOW ---------- */
  --pz-shadow-sm: 0 1px 2px rgba(10,31,68,0.06);
  --pz-shadow-md: 0 6px 20px rgba(10,31,68,0.10);
  --pz-shadow-lg: 0 16px 40px rgba(10,31,68,0.16);
  --pz-shadow-yellow: 0 6px 20px rgba(255,212,0,0.35);

  /* ---------- MOTION ---------- */
  --pz-ease: cubic-bezier(0.34, 1.35, 0.64, 1);
  --pz-ease-out: cubic-bezier(0.4, 0, 0.2, 1);
  --pz-duration-fast: 120ms;
  --pz-duration-base: 200ms;
  --pz-duration-slow: 420ms;

  /* ---------- Z-INDEX ---------- */
  --pz-z-header: 100;
  --pz-z-overlay: 200;
  --pz-z-modal: 300;
  --pz-z-toast: 400;
}

:root[data-theme="dark"]{
  --pz-navy: #F4F6FB;
  --pz-navy-700: #FFFFFF;
  --pz-navy-100: #1B2740;

  --pz-yellow: #FFDD33;
  --pz-yellow-600: #FFE666;
  --pz-yellow-100: #322B0F;

  --pz-bg: #0E1424;
  --pz-bg-sunken: #161D30;
  --pz-surface: #161D30;

  --pz-text: #EDF0F7;
  --pz-text-muted: #AEB6CB;
  --pz-text-faint: #757F98;

  --pz-border: #262E45;
  --pz-border-strong: #333C57;

  --pz-success: #57C793;
  --pz-success-bg: #12291F;

  --pz-gray: #1A2036;
  --pz-overlay: rgba(0,0,0,0.7);
}

@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}