/*
 * Arovia Fashion — CSS Custom Properties (Design Tokens)
 * -------------------------------------------------------
 * All brand values are defined here once.
 * Import this file first in the enqueue chain.
 * Never hardcode hex values outside this file.
 */

:root {

  /* ── Colour Palette ──────────────────────────────────── */

  /* Backgrounds */
  --color-bg-ivory:          #FAF7F2;
  --color-bg-white:          #FFFFFF;
  --color-bg-light:          #F5F1EA;   /* very subtle warm off-white for section contrast */
  --color-bg-dark:           #1A1614;   /* near-black for full-bleed dark sections */

  /* Brand */
  --color-brand:             #6E1F2A;   /* Deep Burgundy — primary brand colour */
  --color-brand-hover:       #581828;   /* Darker on hover */
  --color-brand-light:       #8B2535;   /* Lighter variant for gradients/accents */
  --color-brand-subtle:      #F9EEF0;   /* Very light tint for badges, chips */

  /* Accent */
  --color-accent:            #C9A227;   /* Champagne Gold — use sparingly */
  --color-accent-hover:      #B08F20;
  --color-accent-light:      #F5E9C0;   /* Gold tint for backgrounds */

  /* Text */
  --color-text:              #211F1D;   /* Charcoal — primary body text */
  --color-text-muted:        #6B6460;   /* Secondary / supporting text */
  --color-text-light:        #9A9390;   /* Placeholder, meta, disabled */
  --color-text-on-brand:     #FFFFFF;   /* Text on burgundy backgrounds */
  --color-text-on-dark:      #FAF7F2;   /* Text on dark/near-black backgrounds */

  /* Borders */
  --color-border:            #E8E2D9;   /* Default subtle border */
  --color-border-strong:     #C5BDAF;   /* Stronger divider */
  --color-border-accent:     #C9A227;   /* Gold border — use sparingly */

  /* States */
  --color-error:             #B91C1C;
  --color-success:           #166534;
  --color-warning:           #92400E;
  --color-info:              #1E40AF;

  /* Star ratings */
  --color-star-filled:       #C9A227;
  --color-star-empty:        #D4CEC5;

  /* ── Typography ──────────────────────────────────────── */

  /* Families */
  --font-serif:              'Cormorant Garamond', 'Georgia', serif;
  --font-sans:               'DM Sans', 'Helvetica Neue', 'Arial', sans-serif;

  /* Scale — Major Third (1.250) progression */
  --text-xs:                 0.75rem;    /* 12px */
  --text-sm:                 0.875rem;   /* 14px */
  --text-base:               1rem;       /* 16px */
  --text-md:                 1.125rem;   /* 18px */
  --text-lg:                 1.25rem;    /* 20px */
  --text-xl:                 1.5rem;     /* 24px */
  --text-2xl:                1.875rem;   /* 30px */
  --text-3xl:                2.25rem;    /* 36px */
  --text-4xl:                3rem;       /* 48px */
  --text-5xl:                3.75rem;    /* 60px */
  --text-6xl:                4.5rem;     /* 72px */

  /* Weights */
  --fw-light:                300;
  --fw-regular:              400;
  --fw-medium:               500;
  --fw-semibold:             600;

  /* Line heights */
  --lh-tight:                1.1;
  --lh-snug:                 1.3;
  --lh-normal:               1.5;
  --lh-relaxed:              1.7;
  --lh-loose:                2;

  /* Letter spacing */
  --ls-tight:                -0.02em;
  --ls-normal:               0;
  --ls-wide:                 0.05em;
  --ls-wider:                0.08em;
  --ls-widest:               0.15em;    /* For uppercase tracking */

  /* ── Spacing (8-point grid) ──────────────────────────── */
  --space-1:                 0.25rem;   /* 4px */
  --space-2:                 0.5rem;    /* 8px */
  --space-3:                 0.75rem;   /* 12px */
  --space-4:                 1rem;      /* 16px */
  --space-5:                 1.25rem;   /* 20px */
  --space-6:                 1.5rem;    /* 24px */
  --space-8:                 2rem;      /* 32px */
  --space-10:                2.5rem;    /* 40px */
  --space-12:                3rem;      /* 48px */
  --space-16:                4rem;      /* 64px */
  --space-20:                5rem;      /* 80px */
  --space-24:                6rem;      /* 96px */
  --space-32:                8rem;      /* 128px */

  /* ── Layout ──────────────────────────────────────────── */
  --container-sm:            640px;
  --container-md:            768px;
  --container-lg:            1024px;
  --container-xl:            1280px;
  --container-2xl:           1440px;
  --container-max:           1600px;

  --container-padding-x:     1.5rem;    /* Mobile horizontal padding */
  --container-padding-x-lg:  2.5rem;    /* Desktop horizontal padding */

  /* ── Border Radius ───────────────────────────────────── */
  --radius-sm:               2px;
  --radius-md:               4px;
  --radius-lg:               8px;
  --radius-full:             9999px;

  /* ── Shadows ─────────────────────────────────────────── */
  --shadow-sm:               0 1px 3px rgba(33, 31, 29, 0.06), 0 1px 2px rgba(33, 31, 29, 0.04);
  --shadow-md:               0 4px 16px rgba(33, 31, 29, 0.08);
  --shadow-lg:               0 8px 32px rgba(33, 31, 29, 0.10);
  --shadow-card:             0 2px 12px rgba(33, 31, 29, 0.07);

  /* ── Transitions ─────────────────────────────────────── */
  --transition-fast:         150ms ease;
  --transition-base:         250ms ease;
  --transition-slow:         400ms ease;
  --transition-image:        600ms ease;

  /* ── Z-index Scale ───────────────────────────────────── */
  --z-below:                 -1;
  --z-base:                  0;
  --z-above:                 1;
  --z-dropdown:              100;
  --z-sticky:                200;
  --z-overlay:               300;
  --z-modal:                 400;
  --z-toast:                 500;

  /* ── Header ──────────────────────────────────────────── */
  --header-height:           72px;
  --header-height-mobile:    60px;
  --announcement-height:     40px;

  /* ── Product Card ────────────────────────────────────── */
  --card-aspect-ratio:       3 / 4;     /* Portrait — typical jewellery product ratio */
}

/* ── Responsive token overrides ─────────────────────── */

@media (min-width: 768px) {
  :root {
    --container-padding-x: 2rem;
  }
}

@media (min-width: 1280px) {
  :root {
    --container-padding-x: var(--container-padding-x-lg);
  }
}

/* ── Reduced motion — disable transitions globally ───── */
@media (prefers-reduced-motion: reduce) {
  :root {
    --transition-fast:   0ms;
    --transition-base:   0ms;
    --transition-slow:   0ms;
    --transition-image:  0ms;
  }
}