/* ============================================================
   SHAH FABRIC — DESIGN TOKENS
   These CSS variables are the DEFAULT theme ("Elegant Ivory").
   The Admin Appearance Manager overwrites these at runtime by
   setting inline styles on :root — see js/appearance.js
   ============================================================ */

:root {
  /* Colors */
  --color-primary: #171714;       /* premium charcoal — buttons, links, accents */
  --color-secondary: #B39A70;      /* warm champagne gold — dividers, small accents */
  --color-accent: #24231F;         /* warm charcoal */
  --color-sale-badge: #8B2929;
  --color-background: #FAF8F3;     /* premium warm ivory */
  --color-surface: #FFFFFF;
  --color-text: #24231F;
  --color-text-muted: #777168;
  --color-button: #171714;
  --color-button-text: #FFFFFF;
  --color-border: #E7E1D6;

  --color-header-bg: #FCFBF8;
  --color-header-text: #171714;
  --color-footer-bg: #151512;
  --color-footer-text: #FAF8F3;
  --color-announcement-bg: #171714;
  --color-announcement-text: #FAF8F3;

  /* Typography */
  --font-heading: 'Playfair Display', Georgia, serif;
  --font-body: 'Jost', 'Segoe UI', sans-serif;

  /* Shape */
  --radius-card: 4px;          /* 'rounded' default; JS toggles this per admin setting */
  --radius-pill: 999px;

  /* Spacing scale */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 16px;
  --space-4: 24px;
  --space-5: 40px;
  --space-6: 64px;
  --space-7: 96px;

  /* Layout */
  --container-width: 1280px;
  --transition-base: 220ms ease;
}

/* Product card shape — toggled via data-card-shape on <body> from Appearance settings */
[data-card-shape="square"]  .product-card__image  { border-radius: 0; }
[data-card-shape="rounded"] .product-card__image  { border-radius: 8px; }
[data-card-shape="circle"]  .product-card__image  { border-radius: 50%; aspect-ratio: 1/1; }
[data-card-shape="arch"]    .product-card__image  { border-radius: 999px 999px 8px 8px; }

/* Collection card shape — separate, independent setting (data-collection-shape) */
[data-collection-shape="square"]  .collection-card__image { border-radius: 0; }
[data-collection-shape="rounded"] .collection-card__image { border-radius: 8px; }
[data-collection-shape="circle"]  .collection-card__image { border-radius: 50%; aspect-ratio: 1/1; }
[data-collection-shape="arch"]    .collection-card__image { border-radius: 999px 999px 8px 8px; }