/* ============================================================
   LIZABEELA Design Tokens
   Single source of truth for all design values.
   Every other stylesheet references these custom properties.
   ============================================================ */

:root {
  /* ── Color System ── */
  --color-primary-white:      #fffdfb;
  --color-page-bg:            #faf8f5;
  --color-secondary-bg:       #f5f1ee;
  --color-primary-dark:       #2e2e2e;
  --color-muted-taupe:        #887870;
  --color-rose-accent:        #d8a7b1;
  --color-black:              #111111;

  /* Semantic color aliases */
  --color-body-bg:            var(--color-page-bg);
  --color-text-primary:       var(--color-primary-dark);
  --color-text-secondary:     var(--color-muted-taupe);
  --color-text-on-dark:       var(--color-primary-white);
  --color-accent:             var(--color-rose-accent);
  --color-badge-new-bg:       var(--color-primary-dark);
  --color-badge-sale-bg:      var(--color-rose-accent);
  --color-badge-bestseller-bg: var(--color-primary-dark);
  --color-badge-text:         var(--color-primary-white);
  --color-testimonial-bg:     var(--color-black);
  --color-border:             rgba(46, 46, 46, 0.1);
  --color-border-on-dark:     rgba(255, 253, 251, 0.08);
  --color-input-bg:           var(--color-primary-white);
  --color-overlay:            rgba(46, 46, 46, 0.55);
  --color-overlay-light:      rgba(46, 46, 46, 0.15);

  /* ── Typography ── */
  --font-heading:             'Playfair Display', Georgia, 'Times New Roman', serif;
  --font-body:                'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  --fs-h1:                    4.5rem;      /* 72px */
  --fs-h2:                    3rem;        /* 48px */
  --fs-h3:                    1.125rem;    /* 18px */
  --fs-h3-alt:                1rem;        /* 16px */
  --fs-body:                  1rem;        /* 16px */
  --fs-body-sm:               0.875rem;    /* 14px */
  --fs-product-title:         0.875rem;    /* 14px */
  --fs-label:                 0.625rem;    /* 10px */
  --fs-price:                 1rem;        /* 16px */
  --fs-price-lg:              1.5rem;      /* 24px */
  --fs-small:                 0.75rem;     /* 12px */

  --fw-light:                 300;
  --fw-normal:                400;
  --fw-medium:                500;
  --fw-semibold:              600;
  --fw-bold:                  700;

  --lh-h1:                    1.08;
  --lh-h2:                    1;
  --lh-h3:                    1.3;
  --lh-body:                  1.625;
  --lh-tight:                 1.1;
  --lh-relaxed:               1.75;

  --ls-label:                 0.1em;
  --ls-label-wide:            0.3em;
  --ls-button:                0.2em;

  /* ── Spacing Scale ── */
  --space-3xs:                0.125rem;    /* 2px */
  --space-2xs:                0.25rem;     /* 4px */
  --space-xs:                 0.5rem;      /* 8px */
  --space-sm:                 0.75rem;     /* 12px */
  --space-md:                 1rem;        /* 16px */
  --space-lg:                 1.5rem;      /* 24px */
  --space-xl:                 2rem;        /* 32px */
  --space-2xl:                3rem;        /* 48px */
  --space-3xl:                4rem;        /* 64px */
  --space-4xl:                6rem;        /* 96px */
  --space-5xl:                7rem;        /* 112px */

  --section-padding-y:        var(--space-5xl);   /* 112px */
  --section-padding-x:        var(--space-2xl);    /* 48px */

  /* ── Layout ── */
  --container-narrow:         960px;
  --container-default:        1280px;
  --container-wide:           1440px;
  --container-full:           1536px;
  --grid-gap:                 var(--space-lg);

  /* ── Header ── */
  --header-announcement-h:    35px;
  --header-main-h:            71px;
  --header-total-h:           106px;

  /* ── Borders & Radius ── */
  --radius-none:              0;
  --radius-sm:                4px;
  --radius-md:                8px;
  --radius-lg:                12px;
  --radius-pill:              9999px;
  --border-width:             1px;

  /* ── Shadows ── */
  --shadow-sm:                0 1px 3px rgba(0, 0, 0, 0.08);
  --shadow-md:                0 4px 12px rgba(0, 0, 0, 0.1);
  --shadow-lg:                0 8px 30px rgba(0, 0, 0, 0.12);

  /* ── Transitions ── */
  --transition-fast:          150ms ease;
  --transition-base:          300ms ease;
  --transition-slow:          500ms ease;

  /* ── Z-Index Scale ── */
  --z-dropdown:               100;
  --z-sticky:                 200;
  --z-overlay:                300;
  --z-modal:                  400;
  --z-toast:                  500;
}