/* Iris Paints — design tokens (from irispaints.com shared.css) */

:root {
  --iris-purple:   #C41E1E;
  --iris-lavender: #E8B84B;
  --iris-mid:      #D4500A;
  --iris-dark:     #2A0808;
  --iris-cream:    #FAF6F0;

  --text-dark:  #1a0505;
  --text-mid:   #4a1a1a;

  --font-display: 'Playfair Display', Georgia, serif;
  --font-body:    'Inter', system-ui, sans-serif;

  --iris-radius-sm:   8px;
  --iris-radius-md:   16px;
  --iris-radius-lg:   28px;
  --iris-radius-full: 9999px;

  --iris-shadow-sm:  0 2px 8px  rgba(43, 5, 5, 0.08);
  --iris-shadow-md:  0 8px 24px rgba(43, 5, 5, 0.12);
  --iris-shadow-lg:  0 16px 48px rgba(43, 5, 5, 0.18);

  --iris-transition: 0.25s ease;

  /* Payload token bridge */
  --payload-primary:       var(--iris-purple);
  --payload-primary-dark:  #9e1818;
  --payload-accent:        var(--iris-lavender);
  --payload-danger:        var(--iris-purple);
  --payload-success:       #2d6a4f;

  --payload-bg:            var(--iris-cream);
  --payload-surface:       #ffffff;
  --payload-border:        rgba(232, 184, 75, 0.35);

  --payload-text:          var(--text-dark);
  --payload-text-muted:    var(--text-mid);

  --payload-font:          var(--font-body);

  --payload-radius-sm: var(--iris-radius-sm);
  --payload-radius-md: var(--iris-radius-md);
  --payload-radius-lg: var(--iris-radius-lg);

  --payload-shadow-sm: var(--iris-shadow-sm);
  --payload-shadow-md: var(--iris-shadow-md);

  --nav-height: 60px;

  /* Payload template aliases (used by payload-storefront.css) */
  --color-primary:       var(--payload-primary);
  --color-primary-dark:  var(--payload-primary-dark);
  --color-danger:        var(--payload-danger);
  --color-success:       var(--payload-success);
  --color-bg:            var(--payload-bg);
  --color-surface:       var(--payload-surface);
  --color-border:        var(--payload-border);
  --color-text:          var(--payload-text);
  --color-text-muted:    var(--payload-text-muted);
  --font-size-sm:        0.875rem;
  --font-size-base:      1rem;
  --font-size-lg:        1.125rem;
  --font-size-xl:        1.25rem;
  --font-size-2xl:       1.5rem;
  --font-size-4xl:       2.25rem;
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-6:  1.5rem;
  --space-8:  2rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --radius-sm: var(--payload-radius-sm);
  --radius-md: var(--payload-radius-md);
  --radius-lg: var(--payload-radius-lg);
  --shadow-sm: var(--payload-shadow-sm);
  --shadow-md: var(--payload-shadow-md);
}

@media (min-width: 768px) {
  :root { --nav-height: 70px; }
}