/* THEME: lukomshop — Design Tokens — Dark + Yellow Merch Theme */

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

:root {
  /* Brand */
  --yellow: #FFD700;
  --yellow-dark: #E6C200;
  --yellow-muted: rgba(255, 215, 0, 0.12);
  --navy: #0A0A1A;
  --navy-light: #12122A;
  --navy-card: #151530;
  --blue: #2563EB;
  --blue-dark: #1D4ED8;

  /* Neutrals */
  --white: #f7f7f8;
  --gray-50: #f0f1f3;
  --gray-100: #f3f4f6;
  --gray-200: #e5e7eb;
  --gray-300: #d1d5db;
  --gray-400: #9ca3af;
  --gray-500: #6b7280;
  --gray-600: #4b5563;
  --gray-700: #374151;
  --gray-800: #1f2937;
  --gray-900: #111827;
  --black: #000000;

  /* Status */
  --red: #ef4444;
  --green: #22c55e;

  /* Typography */
  --font: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-display: 'Poleno', Georgia, serif;

  /* Layout */
  --max-w: 1200px;
  --gutter: 24px;

  /* Radius — playful/rounded */
  --r-sm: 10px;
  --r: 16px;
  --r-lg: 24px;
  --r-xl: 32px;
  --r-pill: 999px;

  /* Shadows */
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.1);
  --shadow: 0 4px 20px rgba(0,0,0,0.1);
  --shadow-lg: 0 16px 48px rgba(0,0,0,0.12);
  --shadow-yellow: 0 8px 32px rgba(255,215,0,0.25);
  --shadow-card: 0 4px 24px rgba(0,0,0,0.06);
  --shadow-card-hover: 0 20px 60px rgba(0,0,0,0.12);
}