/* ============================================
   PAPERBOY — Design Tokens
   Minimalist · Premium · White
   ============================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&family=Outfit:wght@400;500;600;700&display=swap');

:root {
  /* ── Colour Palette ─────────────────────── */
  --clr-primary:       #3B5998;
  --clr-primary-light: #5A7BC4;
  --clr-primary-dark:  #2C4373;

  --clr-accent:        #D4956A;
  --clr-accent-light:  #E8B794;
  --clr-accent-dark:   #B87A4F;

  --clr-success:       #22C55E;
  --clr-error:         #EF4444;

  --clr-bg:            #FFFFFF;
  --clr-bg-card:       rgba(255, 255, 255, 0.85);
  --clr-bg-card-hover: rgba(255, 255, 255, 1);

  --clr-text:          #111111;
  --clr-text-secondary:#6B7280;
  --clr-text-muted:    #9CA3AF;
  --clr-text-inverse:  #FFFFFF;

  --clr-border:        rgba(0, 0, 0, 0.08);
  --clr-border-focus:  rgba(59, 89, 152, 0.35);
  --clr-selected-glow: rgba(59, 89, 152, 0.12);

  /* ── Typography ─────────────────────────── */
  --font-heading:      'Outfit', system-ui, -apple-system, sans-serif;
  --font-body:         'Inter', system-ui, -apple-system, sans-serif;

  --fs-hero:           clamp(1.75rem, 3.5vw, 2.75rem);
  --fs-h1:             clamp(1.5rem, 2.5vw, 2.25rem);
  --fs-h2:             clamp(1.1rem, 2vw, 1.5rem);
  --fs-h3:             clamp(0.95rem, 1.5vw, 1.15rem);
  --fs-body:           clamp(0.9rem, 1.5vw, 1rem);
  --fs-small:          clamp(0.75rem, 1.2vw, 0.85rem);
  --fs-xs:             0.7rem;

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

  --lh-tight:          1.15;
  --lh-normal:         1.5;
  --lh-relaxed:        1.65;

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

  /* ── Border Radius ──────────────────────── */
  --radius-sm:         0.375rem;
  --radius-md:         0.5rem;
  --radius-lg:         0.75rem;
  --radius-xl:         1rem;
  --radius-pill:       100vmax;
  --radius-circle:     50%;

  /* ── Shadows ────────────────────────────── */
  --shadow-sm:         0 1px 2px rgba(0,0,0,0.04);
  --shadow-md:         0 2px 8px rgba(0,0,0,0.06);
  --shadow-lg:         0 8px 24px rgba(0,0,0,0.08);
  --shadow-glow:       0 0 0 2px var(--clr-primary), 0 0 20px var(--clr-selected-glow);
  --shadow-inner:      inset 0 1px 3px rgba(0,0,0,0.04);

  /* ── Transitions ────────────────────────── */
  --ease-smooth:       cubic-bezier(0.4, 0, 0.2, 1);
  --ease-bounce:       cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-spring:       cubic-bezier(0.22, 1, 0.36, 1);

  --dur-fast:          120ms;
  --dur-normal:        220ms;
  --dur-slow:          400ms;
  --dur-reveal:        600ms;

  --transition-default: all var(--dur-normal) var(--ease-smooth);
  --transition-fast:    all var(--dur-fast)   var(--ease-smooth);
  --transition-bounce:  all var(--dur-normal) var(--ease-bounce);

  /* ── Layout ─────────────────────────────── */
  --max-width:         1200px;
  --content-padding:   clamp(1.25rem, 4vw, 3rem);

  /* ── Glass (subtle) ─────────────────────── */
  --glass-blur:        8px;
  --glass-bg:          rgba(255, 255, 255, 0.75);
  --glass-border:      1px solid rgba(0, 0, 0, 0.06);

  /* ── Z-index Scale ──────────────────────── */
  --z-base:            1;
  --z-dropdown:        100;
  --z-sticky:          200;
  --z-overlay:         300;
  --z-modal:           400;
  --z-toast:           500;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast:    0ms;
    --dur-normal:  0ms;
    --dur-slow:    0ms;
    --dur-reveal:  0ms;
  }
}