/* css/tokens.css — Design tokens for Sixto Soto Painting */

:root {
  /* ─── Colors ──────────────────────────────── */
  --clr-white:       #ffffff;
  --clr-bg:          #f8fafc;
  --clr-dark:        #111827;
  --clr-charcoal:    #1e293b;
  --clr-muted:       #64748b;
  --clr-border:      rgba(0, 0, 0, 0.08);

  --clr-brand:        #1e40af;
  --clr-accent:       #2563eb;
  --clr-accent-hov:   #1d4ed8;
  --clr-accent-lite:  #eff6ff;
  --clr-accent-light: #93c5fd;
  --clr-star:         #f59e0b;

  /* ─── Typography ──────────────────────────── */
  --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --sz-xs:   0.75rem;
  --sz-sm:   0.875rem;
  --sz-base: 1rem;
  --sz-lg:   1.125rem;
  --sz-xl:   1.25rem;
  --sz-2xl:  1.5rem;
  --sz-3xl:  1.875rem;
  --sz-4xl:  2.25rem;
  --sz-5xl:  3rem;
  --sz-6xl:  3.75rem;

  /* ─── Spacing ─────────────────────────────── */
  --sp-1:  0.25rem;
  --sp-2:  0.5rem;
  --sp-3:  0.75rem;
  --sp-4:  1rem;
  --sp-5:  1.25rem;
  --sp-6:  1.5rem;
  --sp-8:  2rem;
  --sp-10: 2.5rem;
  --sp-12: 3rem;
  --sp-16: 4rem;
  --sp-20: 5rem;
  --sp-24: 6rem;

  /* ─── Layout ──────────────────────────────── */
  --max-w: 1200px;
  --pad-x: 1.5rem;
  --header-height: 112px;

  /* ─── Radii ───────────────────────────────── */
  --r-sm: 4px;
  --r:    8px;
  --r-lg: 12px;
  --r-xl: 20px;

  /* ─── Shadows ─────────────────────────────── */
  --sh-sm: 0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
  --sh-md: 0 4px 16px rgba(0,0,0,0.08);
  --sh-lg: 0 16px 48px rgba(0,0,0,0.14);

  /* ─── Easing ──────────────────────────────── */
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --dur:  0.25s;
  --dur-slide: 0.45s;
}