/* ============================================================
   Rennuce — DESIGN TOKENS (variables.css)
   Central source of truth for all design decisions.
   Every CSS file imports values from here via var().
   ============================================================ */

:root {

   /* =====================================================
     BRAND COLORS
     Primary palette: Deep Black + Warm Gold (luxury)
     Secondary: Warm neutrals + clean whites
  ===================================================== */

   /* Core Brand */
   --color-brand-black: #0A0A0A;
   /* Primary brand black — logo, headings */
   --color-brand-gold: #C9A96E;
   /* Signature gold accent */
   --color-brand-gold-light: #DFC08A;
   /* Lighter gold — hover states */
   --color-brand-gold-dark: #A8844A;
   /* Darker gold — active states */
   --color-brand-white: #FFFFFF;
   /* Pure white */
   --color-brand-cream: #FAF8F5;
   /* Warm off-white — section bg */
   --color-brand-ivory: #F5F0E8;
   /* Deeper ivory — card bg */

   /* =====================================================
     NEUTRAL SCALE
     Used for text, borders, backgrounds, dividers
  ===================================================== */

   --color-gray-50: #FAFAFA;
   --color-gray-100: #F5F5F5;
   --color-gray-150: #EFEFEF;
   --color-gray-200: #E8E8E8;
   --color-gray-300: #D4D4D4;
   --color-gray-400: #B0B0B0;
   --color-gray-500: #8A8A8A;
   --color-gray-600: #6B6B6B;
   --color-gray-700: #4A4A4A;
   --color-gray-800: #2D2D2D;
   --color-gray-900: #1A1A1A;
   --color-gray-950: #0D0D0D;

   /* =====================================================
     SEMANTIC COLORS
     Status indicators, feedback states
  ===================================================== */

   --color-success: #16A34A;
   --color-success-light: #DCFCE7;
   --color-success-dark: #166534;

   --color-error: #DC2626;
   --color-error-light: #FEE2E2;
   --color-error-dark: #991B1B;

   --color-warning: #D97706;
   --color-warning-light: #FEF3C7;
   --color-warning-dark: #92400E;

   --color-info: #2563EB;
   --color-info-light: #DBEAFE;
   --color-info-dark: #1E40AF;

   /* =====================================================
     WHATSAPP BRAND COLOR
  ===================================================== */

   --color-whatsapp: #25D366;
   --color-whatsapp-dark: #1EA952;
   --color-whatsapp-light: #DCF8C6;

   /* =====================================================
     SURFACE COLORS
     Page backgrounds, card surfaces, overlays
  ===================================================== */

   --color-bg-primary: #FFFFFF;
   --color-bg-secondary: #FAF8F5;
   /* Warm cream — section alternates */
   --color-bg-tertiary: #F5F0E8;
   /* Ivory — category cards */
   --color-bg-dark: #0A0A0A;
   /* Black sections */
   --color-bg-dark-soft: #111111;
   /* Slightly lighter dark bg */
   --color-bg-overlay: rgba(10, 10, 10, 0.55);
   /* Hero overlay */
   --color-bg-overlay-dark: rgba(10, 10, 10, 0.72);
   /* Darker overlay */
   --color-bg-overlay-warm: rgba(50, 30, 10, 0.55);
   /* Warm amber overlay */
   --color-bg-overlay-light: rgba(255, 255, 255, 0.08);
   /* Glass effect */
   --color-bg-modal: rgba(10, 10, 10, 0.75);
   /* Modal backdrops */
   --color-bg-skeleton: #E8E8E8;
   /* Loading skeleton base */
   --color-bg-skeleton-shine: #F0F0F0;
   /* Skeleton shimmer */

   /* =====================================================
     TEXT COLORS
  ===================================================== */

   --color-text-primary: #0A0A0A;
   /* Main body text */
   --color-text-secondary: #4A4A4A;
   /* Secondary / descriptions */
   --color-text-muted: #8A8A8A;
   /* Captions, hints */
   --color-text-disabled: #B0B0B0;
   /* Disabled state */
   --color-text-inverse: #FFFFFF;
   /* Text on dark backgrounds */
   --color-text-inverse-muted: rgba(255, 255, 255, 0.65);
   /* Muted on dark */
   --color-text-gold: #C9A96E;
   /* Gold accent text */
   --color-text-link: #0A0A0A;
   /* Link default */
   --color-text-link-hover: #C9A96E;
   /* Link hover */

   /* =====================================================
     BORDER COLORS
  ===================================================== */

   --color-border: #E8E8E8;
   /* Default border */
   --color-border-light: #F0EDED;
   /* Subtle border */
   --color-border-medium: #D4D4D4;
   /* Medium border */
   --color-border-dark: #2D2D2D;
   /* Dark border */
   --color-border-gold: #C9A96E;
   /* Gold border */
   --color-border-focus: #0A0A0A;
   /* Focus ring */

   /* =====================================================
     ANNOUNCEMENT BAR
  ===================================================== */

   --announcement-bg: #0A0A0A;
   --announcement-text: #FFFFFF;
   --announcement-link: #C9A96E;
   --announcement-height: 42px;

   /* =====================================================
     TYPOGRAPHY
     Fonts loaded from Google Fonts in index.html
  ===================================================== */

   /* Font Families */
   --font-serif: 'Tenor Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI',
      Roboto, Helvetica, Arial, sans-serif;
   --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI',
      Roboto, Helvetica, Arial, sans-serif;
   --font-mono: 'Courier New', Courier, monospace;

   /* Font Sizes — fluid scale */
   --text-xs: 0.75rem;
   /*  12px */
   --text-sm: 0.8125rem;
   /*  13px */
   --text-base: 0.9375rem;
   /*  15px */
   --text-md: 1rem;
   /*  16px */
   --text-lg: 1.125rem;
   /*  18px */
   --text-xl: 1.25rem;
   /*  20px */
   --text-2xl: 1.5rem;
   /*  24px */
   --text-3xl: 1.875rem;
   /*  30px */
   --text-4xl: 2.25rem;
   /*  36px */
   --text-5xl: 3rem;
   /*  48px */
   --text-6xl: 3.75rem;
   /*  60px */
   --text-7xl: 4.5rem;
   /*  72px */

   /* Line Heights */
   --leading-none: 1;
   --leading-tight: 1.2;
   --leading-snug: 1.35;
   --leading-normal: 1.55;
   --leading-relaxed: 1.7;
   --leading-loose: 2;

   /* Letter Spacing */
   --tracking-tightest: -0.04em;
   --tracking-tight: -0.02em;
   --tracking-snug: -0.01em;
   --tracking-normal: 0;
   --tracking-wide: 0.04em;
   --tracking-wider: 0.08em;
   --tracking-widest: 0.12em;
   --tracking-mega: 0.2em;

   /* Font Weights */
   --weight-light: 300;
   --weight-regular: 400;
   --weight-medium: 500;
   --weight-semibold: 600;
   --weight-bold: 700;

   /* =====================================================
     SPACING SCALE
     Base-4 system (4px = 1 unit)
  ===================================================== */

   --space-0: 0;
   --space-px: 1px;
   --space-0-5: 0.125rem;
   /*  2px */
   --space-1: 0.25rem;
   /*  4px */
   --space-1-5: 0.375rem;
   /*  6px */
   --space-2: 0.5rem;
   /*  8px */
   --space-2-5: 0.625rem;
   /* 10px */
   --space-3: 0.75rem;
   /* 12px */
   --space-3-5: 0.875rem;
   /* 14px */
   --space-4: 1rem;
   /* 16px */
   --space-5: 1.25rem;
   /* 20px */
   --space-6: 1.5rem;
   /* 24px */
   --space-7: 1.75rem;
   /* 28px */
   --space-8: 2rem;
   /* 32px */
   --space-9: 2.25rem;
   /* 36px */
   --space-10: 2.5rem;
   /* 40px */
   --space-11: 2.75rem;
   /* 44px */
   --space-12: 3rem;
   /* 48px */
   --space-14: 3.5rem;
   /* 56px */
   --space-16: 4rem;
   /* 64px */
   --space-20: 5rem;
   /* 80px */
   --space-24: 6rem;
   /* 96px */
   --space-28: 7rem;
   /* 112px */
   --space-32: 8rem;
   /* 128px */
   --space-36: 9rem;
   /* 144px */
   --space-40: 10rem;
   /* 160px */

   /* =====================================================
     SECTION SPACING
     Consistent vertical rhythm across pages
  ===================================================== */

   --section-padding-y: 5rem;
   /* 80px desktop */
   --section-padding-y-sm: 3rem;
   /* 48px mobile */
   --section-header-mb: 3rem;
   /* Below section title */
   --section-header-mb-sm: 2rem;

   /* =====================================================
     LAYOUT — CONTAINERS & GRID
  ===================================================== */

   --container-max: 1400px;
   /* Max site width */
   --container-wide: 1280px;
   /* Wide layout */
   --container-normal: 1100px;
   /* Standard */
   --container-narrow: 760px;
   /* Blog/article */
   --container-px: 1.5rem;
   /* Side padding mobile */
   --container-px-md: 2rem;
   /* Side padding tablet */
   --container-px-lg: 3rem;
   /* Side padding desktop */

   --grid-gap: 1.5rem;
   /* Default grid gap */
   --grid-gap-sm: 1rem;
   --grid-gap-lg: 2rem;

   /* =====================================================
     BORDER RADIUS
  ===================================================== */

   --radius-none: 0;
   --radius-sm: 0.25rem;
   /*  4px */
   --radius-md: 0.5rem;
   /*  8px */
   --radius-lg: 0.75rem;
   /* 12px */
   --radius-xl: 1rem;
   /* 16px */
   --radius-2xl: 1.5rem;
   /* 24px */
   --radius-3xl: 2rem;
   /* 32px */
   --radius-full: 9999px;
   /* Pill shape */

   /* Specific component radius */
   --radius-btn: 0.375rem;
   /* Buttons */
   --radius-card: 0.75rem;
   /* Product cards */
   --radius-input: 0.375rem;
   /* Form inputs */
   --radius-badge: 0.25rem;
   /* Badges/labels */
   --radius-modal: 1rem;
   /* Modal panels */
   --radius-tooltip: 0.375rem;
   /* Tooltips */

   /* =====================================================
     SHADOWS
     Layered box-shadow system
  ===================================================== */

   --shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.04);
   --shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.08),
      0 1px 2px -1px rgba(0, 0, 0, 0.06);
   --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.08),
      0 2px 4px -2px rgba(0, 0, 0, 0.06);
   --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.08),
      0 4px 6px -4px rgba(0, 0, 0, 0.05);
   --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.10),
      0 8px 10px -6px rgba(0, 0, 0, 0.06);
   --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.20);
   --shadow-inner: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);
   --shadow-none: none;

   /* Colored shadows */
   --shadow-gold: 0 8px 24px rgba(201, 169, 110, 0.25);
   --shadow-gold-sm: 0 4px 12px rgba(201, 169, 110, 0.18);
   --shadow-card: 0 2px 8px rgba(0, 0, 0, 0.06),
      0 0 1px rgba(0, 0, 0, 0.04);
   --shadow-card-hover: 0 12px 32px rgba(0, 0, 0, 0.12),
      0 0 1px rgba(0, 0, 0, 0.04);
   --shadow-modal: 0 32px 64px rgba(0, 0, 0, 0.20);
   --shadow-sidebar: -4px 0 32px rgba(0, 0, 0, 0.12);

   /* =====================================================
     TRANSITIONS & ANIMATIONS
  ===================================================== */

   /* Durations */
   --duration-instant: 100ms;
   --duration-fast: 150ms;
   --duration-base: 220ms;
   --duration-slow: 350ms;
   --duration-slower: 500ms;
   --duration-slowest: 700ms;

   /* Easing functions */
   --ease-linear: linear;
   --ease-in: cubic-bezier(0.4, 0, 1, 1);
   --ease-out: cubic-bezier(0, 0, 0.2, 1);
   --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
   --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
   --ease-spring: cubic-bezier(0.175, 0.885, 0.32, 1.275);
   --ease-smooth: cubic-bezier(0.25, 0.1, 0.25, 1);

   /* Common transition combos */
   --transition-base: all var(--duration-base) var(--ease-in-out);
   --transition-colors: color var(--duration-base) var(--ease-in-out),
      background-color var(--duration-base) var(--ease-in-out),
      border-color var(--duration-base) var(--ease-in-out);
   --transition-transform: transform var(--duration-base) var(--ease-in-out);
   --transition-opacity: opacity var(--duration-base) var(--ease-in-out);
   --transition-shadow: box-shadow var(--duration-base) var(--ease-in-out);
   --transition-fast: all var(--duration-fast) var(--ease-in-out);
   --transition-slow: all var(--duration-slow) var(--ease-in-out);

   /* =====================================================
     Z-INDEX SCALE
     Layering system — higher = on top
  ===================================================== */

   --z-below: -1;
   --z-base: 0;
   --z-raised: 10;
   --z-dropdown: 100;
   --z-sticky: 200;
   --z-header: 300;
   --z-overlay: 400;
   --z-sidebar: 500;
   --z-modal: 600;
   --z-toast: 700;
   --z-tooltip: 800;
   --z-top: 900;
   --z-max: 9999;

   /* =====================================================
     HEADER
  ===================================================== */

   --header-height: 68px;
   /* Scrolled/compact */
   --header-height-lg: 80px;
   /* Desktop full */
   --header-bg: #FFFFFF;
   --header-bg-scrolled: rgba(255, 255, 255, 0.97);
   --header-border: #F0EDED;
   --header-text: #0A0A0A;
   --header-link-hover: #C9A96E;
   --header-shadow: 0 1px 0 rgba(0, 0, 0, 0.06),
      0 4px 12px rgba(0, 0, 0, 0.04);

   /* =====================================================
     BUTTONS
  ===================================================== */

   /* Primary Button */
   --btn-primary-bg: #0A0A0A;
   --btn-primary-bg-hover: #1A1A1A;
   --btn-primary-bg-active: #2D2D2D;
   --btn-primary-text: #FFFFFF;
   --btn-primary-border: transparent;

   /* Secondary / Outline Button */
   --btn-outline-bg: transparent;
   --btn-outline-bg-hover: #0A0A0A;
   --btn-outline-text: #0A0A0A;
   --btn-outline-text-hover: #FFFFFF;
   --btn-outline-border: #0A0A0A;

   /* Ghost Button (on dark backgrounds) */
   --btn-ghost-bg: transparent;
   --btn-ghost-bg-hover: rgba(255, 255, 255, 0.12);
   --btn-ghost-text: #FFFFFF;
   --btn-ghost-border: rgba(255, 255, 255, 0.55);

   /* Gold / Accent Button */
   --btn-gold-bg: #C9A96E;
   --btn-gold-bg-hover: #DFC08A;
   --btn-gold-text: #0A0A0A;
   --btn-gold-border: transparent;

   /* WhatsApp Button */
   --btn-wa-bg: #25D366;
   --btn-wa-bg-hover: #1EA952;
   --btn-wa-text: #FFFFFF;

   /* Button sizing */
   --btn-padding-y-sm: 0.5rem;
   --btn-padding-x-sm: 1rem;
   --btn-padding-y-md: 0.7rem;
   --btn-padding-x-md: 1.5rem;
   --btn-padding-y-lg: 0.9rem;
   --btn-padding-x-lg: 2rem;
   --btn-font-size-sm: var(--text-sm);
   --btn-font-size-md: var(--text-base);
   --btn-font-size-lg: var(--text-md);
   --btn-font-weight: var(--weight-semibold);
   --btn-letter-spacing: var(--tracking-wide);
   --btn-radius: var(--radius-btn);

   /* =====================================================
     FORMS & INPUTS
  ===================================================== */

   --input-bg: #FFFFFF;
   --input-bg-focus: #FFFFFF;
   --input-border: #D4D4D4;
   --input-border-hover: #0A0A0A;
   --input-border-focus: #0A0A0A;
   --input-border-error: #DC2626;
   --input-text: #0A0A0A;
   --input-placeholder: #B0B0B0;
   --input-label: #4A4A4A;
   --input-padding-y: 0.65rem;
   --input-padding-x: 0.875rem;
   --input-font-size: var(--text-base);
   --input-radius: var(--radius-input);
   --input-shadow-focus: 0 0 0 3px rgba(10, 10, 10, 0.10);

   /* =====================================================
     PRODUCT CARDS
  ===================================================== */

   --card-bg: #FFFFFF;
   --card-border: transparent;
   --card-border-hover: transparent;
   --card-radius: var(--radius-card);
   --card-shadow: var(--shadow-card);
   --card-shadow-hover: var(--shadow-card-hover);
   --card-img-ratio: 4 / 5;
   /* Portrait — fashion standard */
   --card-padding: 0.875rem;

   /* Product badge colors */
   --badge-new-bg: #0A0A0A;
   --badge-new-text: #FFFFFF;
   --badge-sale-bg: #DC2626;
   --badge-sale-text: #FFFFFF;
   --badge-sold-bg: #8A8A8A;
   --badge-sold-text: #FFFFFF;
   --badge-featured-bg: #C9A96E;
   --badge-featured-text: #0A0A0A;

   /* Star rating */
   --color-star: #F59E0B;
   --color-star-empty: #E8E8E8;

   /* =====================================================
     CART SIDEBAR
  ===================================================== */

   --cart-width: 440px;
   --cart-width-sm: 100vw;
   --cart-bg: #FFFFFF;
   --cart-header-bg: #FFFFFF;
   --cart-border: #F0EDED;
   --cart-item-hover: #FAFAFA;

   /* =====================================================
     SEARCH OVERLAY
  ===================================================== */

   --search-overlay-bg: #FFFFFF;
   --search-input-bg: #F5F5F5;
   --search-tag-bg: #F5F5F5;
   --search-tag-bg-hover: #0A0A0A;
   --search-tag-text: #4A4A4A;
   --search-tag-text-hover: #FFFFFF;

   /* =====================================================
     ANNOUNCEMENT BAR SPECIFIC
  ===================================================== */

   --announcement-bar-height: 42px;
   --announcement-bar-bg: #0A0A0A;
   --announcement-bar-text: rgba(255, 255, 255, 0.90);
   --announcement-bar-link: #C9A96E;

   /* =====================================================
     HERO SECTION
  ===================================================== */

   --hero-height: 85vh;
   --hero-height-min: 560px;
   --hero-height-max: 900px;
   --hero-dot-size: 8px;
   --hero-dot-active-w: 28px;
   --hero-arrow-size: 48px;

   /* =====================================================
     TRUST STRIP
  ===================================================== */

   --trust-strip-bg: #F5F0E8;
   --trust-strip-border: #EDE8DF;

   /* =====================================================
     NEWSLETTER
  ===================================================== */

   --newsletter-bg: #0A0A0A;
   --newsletter-text: #FFFFFF;
   --newsletter-eyebrow: #C9A96E;

   /* =====================================================
     FOOTER
  ===================================================== */

   --footer-bg: #0A0A0A;
   --footer-text: rgba(255, 255, 255, 0.70);
   --footer-text-bright: #FFFFFF;
   --footer-border: rgba(255, 255, 255, 0.10);
   --footer-link-hover: #C9A96E;
   --footer-heading: #FFFFFF;

   /* =====================================================
     MEGA MENU
  ===================================================== */

   --mega-menu-bg: #FFFFFF;
   --mega-menu-shadow: 0 20px 40px rgba(0, 0, 0, 0.10);
   --mega-menu-border: #F0EDED;

   /* =====================================================
     BREADCRUMBS
  ===================================================== */

   --breadcrumb-text: #8A8A8A;
   --breadcrumb-active: #0A0A0A;
   --breadcrumb-divider: #D4D4D4;

   /* =====================================================
     PAGINATION
  ===================================================== */

   --pagination-bg: #FFFFFF;
   --pagination-bg-hover: #F5F5F5;
   --pagination-bg-active: #0A0A0A;
   --pagination-text: #4A4A4A;
   --pagination-text-active: #FFFFFF;
   --pagination-border: #E8E8E8;

   /* =====================================================
     TOAST NOTIFICATIONS
  ===================================================== */

   --toast-bg-success: #0A0A0A;
   --toast-bg-error: #DC2626;
   --toast-bg-info: #2563EB;
   --toast-bg-warning: #D97706;
   --toast-text: #FFFFFF;
   --toast-radius: 0.5rem;
   --toast-shadow: 0 8px 24px rgba(0, 0, 0, 0.16);

   /* =====================================================
     BACK TO TOP
  ===================================================== */

   --back-top-size: 48px;
   --back-top-bg: #0A0A0A;
   --back-top-bg-hover: #C9A96E;
   --back-top-text: #FFFFFF;

   /* =====================================================
     WHATSAPP FLOATING
  ===================================================== */

   --wa-float-size: 60px;
   --wa-float-bg: #25D366;
   --wa-float-bg-hover: #1EA952;
   --wa-float-shadow: 0 8px 24px rgba(37, 211, 102, 0.35);

   /* =====================================================
     SCROLLBAR (webkit)
  ===================================================== */

   --scrollbar-track: #F5F5F5;
   --scrollbar-thumb: #D4D4D4;
   --scrollbar-thumb-hover: #8A8A8A;
   --scrollbar-width: 6px;

   /* =====================================================
     SKELETON LOADER
  ===================================================== */

   --skeleton-bg: #EFEFEF;
   --skeleton-shine: #F8F8F8;
   --skeleton-radius: 0.375rem;

   /* =====================================================
     FOCUS / ACCESSIBILITY
  ===================================================== */

   --focus-ring-color: #C9A96E;
   --focus-ring-offset: 2px;
   --focus-ring-width: 2px;
   --focus-ring: 0 0 0 var(--focus-ring-width) var(--focus-ring-color);

   /* =====================================================
     BREAKPOINTS  (reference only — use in media queries)
     --bp-sm:  480px
     --bp-md:  768px
     --bp-lg:  1024px
     --bp-xl:  1280px
     --bp-2xl: 1400px
  ===================================================== */

}

/* end :root */


/* ============================================================
   DARK MODE OVERRIDES
   System-level dark mode support (future-ready)
   Currently minimal — brand uses dark header/footer by default
============================================================ */

@media (prefers-color-scheme: dark) {

   :root {
      /* Override only page-level surfaces */
      /* Header and footer are already dark — no change needed */
      /* Cards and main content stay light for fashion product clarity */

      /* Uncomment these when/if full dark mode is activated:

    --color-bg-primary:     #111111;
    --color-bg-secondary:   #1A1A1A;
    --color-bg-tertiary:    #222222;
    --color-text-primary:   #F5F5F5;
    --color-text-secondary: #B0B0B0;
    --color-border:         #2D2D2D;
    --card-bg:              #1A1A1A;
    --input-bg:             #1A1A1A;
    --input-border:         #3D3D3D;
    --input-text:           #F5F5F5;

    */
   }

}


/* ============================================================
   REDUCED MOTION
   Respects user OS setting for accessibility
============================================================ */

@media (prefers-reduced-motion: reduce) {

   :root {
      --duration-instant: 0ms;
      --duration-fast: 0ms;
      --duration-base: 0ms;
      --duration-slow: 0ms;
      --duration-slower: 0ms;
      --duration-slowest: 0ms;
      --transition-base: none;
      --transition-colors: none;
      --transition-transform: none;
      --transition-opacity: none;
      --transition-shadow: none;
      --transition-fast: none;
      --transition-slow: none;
   }

}