/**
 * AYESH Design Tokens — Phase 1 / v1.0.31
 * Official Brand Guidelines supplied 2026-10-21.
 * Stable, public CSS API for all theme components. No layout rules here.
 */
:root {
  /* Brand palette (official) */
  --ayesh-color-primary: #C91524;
  --ayesh-color-primary-hover: #A4101E;
  --ayesh-color-primary-active: #850D18;
  --ayesh-color-secondary: #141414;
  --ayesh-color-premium: #C6A15B;
  --ayesh-color-white: #FFFFFF;

  /* Semantic palette */
  --ayesh-color-text: #232323;
  --ayesh-color-text-strong: #141414;
  --ayesh-color-text-muted: #646464;
  --ayesh-color-border: #E9E9E9;
  --ayesh-color-border-strong: #D8D8D8;
  --ayesh-color-surface: #FFFFFF;
  --ayesh-color-surface-soft: #FAF9F7;
  --ayesh-color-surface-neutral: #F6F6F8;
  --ayesh-color-focus-ring: #C91524;
  --ayesh-color-selection: #F9DEE1;
  --ayesh-color-success: #176A3A;
  --ayesh-color-error: #B42318;

  /* Typography: preserve existing bundled typefaces with Bengali fallbacks. */
  --ayesh-font-body: 'Libre Franklin', 'Noto Sans Bengali', 'Hind Siliguri', 'Nirmala UI', 'Vrinda', sans-serif;
  --ayesh-font-heading: 'Open Sans', 'Noto Sans Bengali', 'Hind Siliguri', 'Nirmala UI', 'Vrinda', sans-serif;
  --ayesh-font-price: var(--ayesh-font-body);
  --ayesh-text-xs: 12px;
  --ayesh-text-sm: 13px;
  --ayesh-text-base: 15px;
  --ayesh-text-md: 16px;
  --ayesh-text-lg: 18px;
  --ayesh-text-h3: clamp(18px, 1.8vw, 24px);
  --ayesh-text-h2: clamp(22px, 2.5vw, 30px);
  --ayesh-text-h1: clamp(30px, 3.2vw, 40px);
  --ayesh-text-product: 14px;
  --ayesh-text-price: 17px;
  --ayesh-line-tight: 1.22;
  --ayesh-line-base: 1.6;
  --ayesh-line-relaxed: 1.7;
  --ayesh-weight-normal: 400;
  --ayesh-weight-medium: 600;
  --ayesh-weight-bold: 700;

  /* Four-pixel spacing system */
  --ayesh-space-0: 0;
  --ayesh-space-1: 4px;
  --ayesh-space-2: 8px;
  --ayesh-space-3: 12px;
  --ayesh-space-4: 16px;
  --ayesh-space-5: 20px;
  --ayesh-space-6: 24px;
  --ayesh-space-8: 32px;
  --ayesh-space-10: 40px;
  --ayesh-space-12: 48px;
  --ayesh-space-16: 64px;

  /* Radius, shadows, control sizing and motion */
  --ayesh-radius-xs: 4px;
  --ayesh-radius-sm: 8px;
  --ayesh-radius-md: 12px;
  --ayesh-radius-card: 16px;
  --ayesh-radius-lg: 20px;
  --ayesh-radius-pill: 999px;
  --ayesh-radius-product-button: 22px 0 22px 0;
  --ayesh-shadow-sm: 0 2px 10px rgb(20 20 20 / 4%);
  --ayesh-shadow-card: 0 8px 24px rgb(20 20 20 / 7%);
  --ayesh-shadow-elevated: 0 16px 36px rgb(20 20 20 / 10%);
  --ayesh-button-height: 44px;
  --ayesh-control-height: 44px;
  --ayesh-motion-fast: 150ms;
  --ayesh-motion-standard: 200ms;
  --ayesh-focus-outline: 2px solid var(--ayesh-color-focus-ring);

  /* Compatibility layer: original template variable names remain supported. */
  --ayesh-crimson: var(--ayesh-color-primary);
  --ayesh-crimson-hover: var(--ayesh-color-primary-hover);
  --ayesh-crimson-pressed: var(--ayesh-color-primary-active);
  --ayesh-carbon-black: var(--ayesh-color-secondary);
  --ayesh-white: var(--ayesh-color-white);
  --ayesh-champagne-gold: var(--ayesh-color-premium);
  --hb-green: var(--ayesh-color-primary);
  --hb-green-dark: var(--ayesh-color-primary-hover);
  --hb-orange: var(--ayesh-color-primary); /* General CTA accent; gold reserved for premium collections. */
  --hb-orange-dark: var(--ayesh-color-primary-hover);
  --hb-ink: var(--ayesh-color-text-strong);
  --hb-muted: var(--ayesh-color-text-muted);
  --hb-line: var(--ayesh-color-border);
  --hb-soft: var(--ayesh-color-surface-soft);
  --hb-white: var(--ayesh-color-white);
  --hb-price: var(--ayesh-color-primary);
  --hb-ref-body-font: var(--ayesh-font-body);
  --hb-ref-heading-font: var(--ayesh-font-heading);
  --hb-ref-body-size: var(--ayesh-text-base);
  --hb-ref-h1: var(--ayesh-text-h1);
  --hb-ref-h2: var(--ayesh-text-h2);
  --hb-ref-h3: var(--ayesh-text-h3);
}

@media (max-width: 760px) {
  :root {
    --ayesh-text-base: 14px;
    --ayesh-text-product: 13px;
    --ayesh-text-price: 15px;
    --ayesh-text-h1: clamp(28px, 7vw, 34px);
    --ayesh-text-h2: clamp(22px, 5.6vw, 28px);
    --ayesh-text-h3: clamp(18px, 4.8vw, 23px);
  }
}