/* ============================================
   Make Art design tokens
   Source: makeart-home-v4.html + customizer-v5.html
   ============================================ */

:root {
  /* Backgrounds */
  --bg: #fdfaf6;
  --bg-soft: #f7f1e8;
  --bg-warm: #f5ede0;
  --surface: #ffffff;
  --surface-2: #f3ece1;

  /* Ink (text) */
  --ink: #1f1d1b;
  --ink-soft: #4a4640;
  --ink-muted: #8c8579;

  /* Lines */
  --line: #ebe2d2;
  --line-soft: #f1ead9;

  /* Brand accents */
  --orange: #ed6a26;
  --orange-soft: #f59658;
  --orange-light: #fef0e6;
  --gold: #d4a574;
  --gold-strong: #c8975a;
  --accent-warm: #b8835a;

  /* Customizer-specific */
  --select: #e8a89a;
  --select-strong: #d97777;
  --select-glow: rgba(232, 168, 154, 0.25);
  --snap: #ec4899;

  /* Typography */
  --serif: 'Frank Ruhl Libre', 'Fraunces', Georgia, serif;
  --display: 'Suez One', 'Fraunces', Georgia, serif;
  --sans: 'Assistant', 'Heebo', -apple-system, BlinkMacSystemFont, sans-serif;
  --script: 'Dancing Script', cursive;

  /* Shadows */
  --shadow-sm: 0 1px 2px rgba(26, 25, 22, 0.06);
  --shadow-md: 0 4px 12px rgba(26, 25, 22, 0.08);
  --shadow-lg: 0 12px 32px rgba(26, 25, 22, 0.12);
  --shadow-xl: 0 24px 48px rgba(26, 25, 22, 0.15);

  /* Radii */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-xl: 20px;
  --radius-2xl: 24px;
  --radius-full: 999px;

  /* Transitions */
  --transition-fast: .18s ease;
  --transition-smooth: .3s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: .5s cubic-bezier(0.4, 0, 0.2, 1);

  /* Layout */
  --container-max: 1280px;
  --container-pad: 24px;
}

@media (max-width: 640px) {
  :root { --container-pad: 16px; }
}