/* ==========================================================================
   BASHI JEWELRY — Design Tokens
   variables.css
   ALL design values defined here. Never hardcode outside this file.
   ========================================================================== */

:root {

  /* COLORS — Core */
  --color-bg:            #F8F7F4;
  --color-white:         #FFFFFF;
  --color-black:         #111111;
  --color-charcoal:      #1A1A1A;
  --color-text:          #171717;
  --color-text-muted:    #666666;
  --color-text-light:    #707070;
  --color-border:        #E6E2DA;
  --color-border-dark:   #333333;

  /* COLORS — Gold Accent (use sparingly) */
  --color-gold:          #8A641F;
  --color-gold-light:    #D6B566;
  --color-gold-dark:     #6B4D17;
  --color-gold-bg:       #FDF8EE;

  /* COLORS — Surfaces */
  --color-surface-1:     #FFFFFF;
  --color-surface-2:     #F8F7F4;
  --color-surface-3:     #F0EDE8;
  --color-surface-4:     #1A1A1A;

  /* COLORS — Functional */
  --color-success:       #2D7A4F;
  --color-success-bg:    #EDF7F2;
  --color-error:         #C0392B;
  --color-error-bg:      #FEF2F2;
  --color-warning:       #D97706;
  --color-warning-bg:    #FFFBEB;
  --color-star:          #F5A623;
  --color-star-empty:    #E0E0E0;
  --color-sale:          #C0392B;

  /* TYPOGRAPHY — Families */
  --font-primary:   'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  --font-display:   'Playfair Display', Georgia, 'Times New Roman', serif;

  /* TYPOGRAPHY — Scale */
  --text-xs:    0.6875rem;  /* 11px */
  --text-sm:    0.75rem;    /* 12px */
  --text-base:  0.875rem;   /* 14px */
  --text-md:    0.9375rem;  /* 15px */
  --text-lg:    1rem;       /* 16px */
  --text-xl:    1.125rem;   /* 18px */
  --text-2xl:   1.375rem;   /* 22px */
  --text-3xl:   1.75rem;    /* 28px */
  --text-4xl:   2.25rem;    /* 36px */
  --text-5xl:   3rem;       /* 48px */
  --text-6xl:   3.75rem;    /* 60px */

  /* TYPOGRAPHY — Weights */
  --weight-normal:    400;
  --weight-medium:    500;
  --weight-semibold:  600;
  --weight-bold:      700;

  /* TYPOGRAPHY — Line Heights */
  --leading-tight:   1.1;
  --leading-snug:    1.2;
  --leading-normal:  1.5;
  --leading-relaxed: 1.6;

  /* TYPOGRAPHY — Letter Spacing */
  --tracking-tight:   -0.01em;
  --tracking-normal:  0em;
  --tracking-wide:    0.02em;
  --tracking-wider:   0.05em;
  --tracking-widest:  0.1em;

  /* SPACING — 4/8px grid */
  --space-1:   4px;
  --space-2:   8px;
  --space-3:   12px;
  --space-4:   16px;
  --space-5:   20px;
  --space-6:   24px;
  --space-8:   32px;
  --space-10:  40px;
  --space-12:  48px;
  --space-16:  64px;
  --space-20:  80px;
  --space-24:  96px;

  --section-padding-y:  72px;
  --section-gap:        64px;

  /* BORDERS */
  --border-width:  1px;
  --border:        1px solid var(--color-border);
  --border-dark:   1px solid var(--color-border-dark);

  --radius-sm:    4px;
  --radius-md:    6px;
  --radius-base:  8px;
  --radius-lg:    12px;
  --radius-xl:    16px;
  --radius-full:  9999px;

  /* SHADOWS */
  --shadow-xs:    0 1px 2px rgba(0,0,0,0.06);
  --shadow-sm:    0 2px 8px rgba(0,0,0,0.08);
  --shadow-md:    0 4px 16px rgba(0,0,0,0.10);
  --shadow-lg:    0 8px 32px rgba(0,0,0,0.12);
  --shadow-gold:  0 2px 8px rgba(184,138,50,0.25);

  /* TRANSITIONS */
  --transition-fast:    150ms ease;
  --transition-base:    200ms ease;
  --transition-smooth:  300ms ease;
  --transition-slow:    500ms ease;

  /* Z-INDEX */
  --z-below:      -1;
  --z-base:        0;
  --z-above:      10;
  --z-dropdown:  100;
  --z-sticky:    200;
  --z-fixed:     300;
  --z-overlay:   400;
  --z-drawer:    500;
  --z-modal:     600;
  --z-toast:     700;

  /* LAYOUT — Containers */
  --container-main:  1440px;
  --container-pad:   var(--space-6);

  /* LAYOUT — Product Grid */
  --grid-cols-desktop:  5;
  --grid-cols-tablet:   3;
  --grid-cols-mobile:   2;
  --grid-gap:           16px;
  --grid-gap-mobile:    10px;

  /* HEADER HEIGHTS */
  --header-announcement-h:   36px;
  --header-main-h:           72px;
  --header-nav-h:            44px;
  --header-mobile-h:         56px;
  --bottom-nav-h:            64px;

  /* PRODUCT CARD */
  --card-padding:   12px;
  --card-radius:    var(--radius-base);
  --card-border:    var(--border);

}