/* ================================================================
   ROSI Exclusive Gourmet Products -- CSS Design Tokens
   Gold: #D4A028 | Deep Black Backgrounds
   Updated: 2026-10-09
   ================================================================ */

:root {

  /* === GOLD — #D4A028 === */
  --color-gold:               #D4A028;
  --color-gold-hover:         #DCBC52;
  --color-gold-light:         #E8CC6E;
  --color-gold-dark:          #A8872A;
  --color-gold-muted-bg:      rgba(212, 160, 40, 0.10);
  --color-gold-border:        rgba(212, 160, 40, 0.30);
  --color-gold-border-strong: rgba(212, 160, 40, 0.65);

  /* === BACKGROUNDS — Deep Black (warm undertone) === */
  --bg-page:          #040302;   /* Darkest — hero, page root */
  --bg-primary:       #060503;   /* Main page background */
  --bg-secondary:     #000000;   /* Alternate section background */
  --bg-card:          #000000;   /* Product cards, feature panels */
  --bg-card-hover:    #181209;   /* Card hover / focus */
  --bg-header:        rgba(6, 5, 3, 0.96);   /* Sticky header */
  --bg-footer:        #020101;   /* Footer — deepest black */
  --bg-announcement:  #020101;   /* Top bar */
  --bg-mobile-menu:   #080604;   /* Mobile nav drawer */
  --bg-overlay:       rgba(4, 3, 2, 0.80);
  --bg-overlay-deep:  rgba(4, 3, 2, 0.94);
  --bg-input:         rgba(17, 13, 7, 0.90);

  /* Story section parchment stays same */
  --bg-story-section: #F5ECD7;

  /* === TEXT === */
  --text-white:    #FFFFFF;
  --text-cream:    #F0E6D0;   /* Slightly warmer cream on deep black */
  --text-secondary:#FFFFFF;
  --text-muted:    #6E6358;
  --text-gold:     #D4A028;
  --text-on-gold:  #000000;
  --text-on-cream: #1A1208;

  /* Aliases */
  --text-primary:  #F0E6D0;
  --text-heading:  #FFFFFF;

  /* === BORDERS === */
  --border-gold:        rgba(212, 160, 40, 0.28);
  --border-gold-hover:  rgba(212, 160, 40, 0.65);
  --border-subtle:      rgba(240, 230, 208, 0.06);
  --border-card:        rgba(212, 160, 40, 0.22);
  --border-input:       rgba(212, 160, 40, 0.38);
  --border-default:     rgba(212, 160, 40, 0.28);

  /* === GRADIENTS === */
  --gradient-hero: linear-gradient(
    to right,
    rgba(4, 3, 2, 0.94) 0%,
    rgba(4, 3, 2, 0.70) 50%,
    rgba(4, 3, 2, 0.12) 100%
  );
  --gradient-card: linear-gradient(
    to top,
    rgba(4, 3, 2, 0.97) 0%,
    rgba(4, 3, 2, 0.60) 50%,
    transparent 100%
  );
  --gradient-gold-divider: linear-gradient(
    90deg,
    transparent 0%,
    #D4A028 30%,
    #E8CC6E 50%,
    #D4A028 70%,
    transparent 100%
  );
  --gradient-btn-shimmer: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255,255,255,0.20) 50%,
    transparent 100%
  );

  /* === TYPOGRAPHY === */
  --font-display: 'Cormorant Garamond', 'Playfair Display', Georgia, serif;
  --font-body:    'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-ui:      'Montserrat', 'Inter', Arial, sans-serif;

  /* Aliases */
  --font-serif:   'Cormorant Garamond', 'Playfair Display', Georgia, serif;
  --font-sans:    'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-accent:  'Montserrat', 'Inter', Arial, sans-serif;

  /* === FONT SIZES === */
  --fs-hero:       clamp(3.2rem, 8vw, 7rem);
  --fs-display-lg: clamp(2.2rem, 4.5vw, 4rem);
  --fs-display-md: clamp(1.75rem, 3vw, 2.8rem);
  --fs-h1: clamp(1.75rem, 2.8vw, 2.8rem);
  --fs-h2: clamp(1.5rem, 2.4vw, 2.4rem);
  --fs-h3: clamp(1.25rem, 1.8vw, 1.75rem);
  --fs-h4: clamp(1.1rem, 1.5vw, 1.35rem);
  --fs-h5: 1.125rem;
  --fs-h6: 1rem;
  --fs-body-lg: 1.125rem;
  --fs-body:    1rem;
  --fs-body-sm: 0.9375rem;
  --fs-label:   0.75rem;
  --fs-caption: 0.6875rem;
  --fs-btn:     0.8125rem;
  --fs-nav:     0.875rem;

  /* === LINE HEIGHTS === */
  --lh-display: 1.05;
  --lh-heading: 1.20;
  --lh-body:    1.75;
  --lh-tight:   1.35;
  --lh-relaxed: 1.90;
  --lh-normal:  1.6;
  --lh-snug:    1.3;

  /* === LETTER SPACING === */
  --ls-tight:   -0.02em;
  --ls-normal:   0em;
  --ls-wide:     0.04em;
  --ls-wider:    0.08em;
  --ls-widest:   0.18em;

  /* === SPACING === */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.25rem;
  --space-6:  1.5rem;
  --space-8:  2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;
  --space-30: 7.5rem;

  /* === LAYOUT === */
  --container-max: 1440px;
  --container-pad: clamp(1rem, 3vw, 2rem);
  --ab-height:     2.5rem;
  --header-height: 4.5rem;
  --header-h:      72px;
  --ab-h:          40px;

  /* === EFFECTS === */
  --radius-none: 0px;
  --radius-xs:   2px;
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-full: 9999px;

  --shadow-sm:    0 2px 8px  rgba(0, 0, 0, 0.65);
  --shadow-md:    0 8px 24px rgba(0, 0, 0, 0.75);
  --shadow-lg:    0 20px 60px rgba(0, 0, 0, 0.85);
  --shadow-gold:  0 8px 32px rgba(212, 160, 40, 0.35);
  --shadow-card:  0 4px 20px rgba(0, 0, 0, 0.65);

  --ease-luxury:  cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --ease-smooth:  cubic-bezier(0.4, 0, 0.2, 1);
  --ease-bounce:  cubic-bezier(0.34, 1.56, 0.64, 1);

  --dur-fast:    200ms;
  --dur-normal:  300ms;
  --dur-slow:    500ms;
  --dur-reveal:  700ms;
  --dur-shimmer: 550ms;

  /* === Z-INDEX === */
  --z-base:       0;
  --z-raised:     10;
  --z-dropdown:   100;
  --z-header:     200;
  --z-mobile-nav: 300;
  --z-overlay:    400;
  --z-modal:      500;
  --z-preloader:  999;
  --z-float:      250;
}

/* ================================================================
   LIGHT MODE (parchment)
   ================================================================ */
[data-theme="light"] {
  --bg-page:       #FAF5EC;
  --bg-primary:    #FAF5EC;
  --bg-secondary:  #F0E5D0;
  --bg-card:       #FFFFFF;
  --bg-card-hover: #FEF8EF;
  --bg-header:     rgba(250, 245, 236, 0.97);
  --bg-input:      rgba(255, 250, 242, 0.95);

  --text-white:    #1A1208;
  --text-cream:    #1A1208;
  --text-primary:  #1A1208;
  --text-heading:  #0A0807;
  --text-secondary:#5C4A30;
  --text-muted:    #9A866A;

  --border-subtle: rgba(26, 18, 8, 0.10);
  --border-card:   rgba(212, 160, 40, 0.28);

  /* Footer + announcement stay dark in light mode */
  --bg-footer:        #020101;
  --bg-announcement:  #020101;
}