/*
Theme Name: Gatha Jewellery
Theme URI: https://example.com/gatha-jewellery/
Description: Premium Custom Theme for Royal Indian Jewelry.
Author: Rahul Dhole
Author URI: https://rahuldhole.com
Version: 1.0.0
Text Domain: gatha-jewellery
*/

@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;600;700;800&family=Montserrat:wght@300;400;500;600;700;800&display=swap');

:root {
    /* ==========================================================================
       1. BRAND PRIMITIVES (Static Core Identity)
       ========================================================================== */
    --brand-velvet-950: #041811;
    --brand-velvet-900: #06241a;
    --brand-velvet-800: #0b3b2c;
    --brand-velvet-700: #12543f;
    
    --brand-cream-50:  #fdfcf7;
    --brand-cream-100: #f6f1d8;
    --brand-cream-200: #eae2bc;
    
    /* Functional Gold tokens (Tuned for contrast & display) */
    --gold-display:    #c5a059;
    --gold-text-light: #7a5c1a; /* WCAG AA compliant on cream */
    --gold-text-dark:  #dfc58a; /* WCAG AA compliant on velvet */

    /* ==========================================================================
       2. LEGACY TOKENS (Preserved for backwards compatibility)
       ========================================================================== */
    --royal-gold: var(--gold-display);
    --royal-gold-light: var(--gold-text-dark);
    --velvet-dark: var(--brand-velvet-900);
    --velvet-green: var(--brand-velvet-800);
    --creamy-light: var(--brand-cream-100);

    /* ==========================================================================
       3. SEMANTIC TOKENS: LIGHT MODE (Default)
       ========================================================================== */
    --color-background: var(--brand-cream-100);
    --color-surface:    var(--brand-cream-50);
    --color-surface-elevated: #ffffff;
    --color-border:     rgba(197, 160, 89, 0.25);

    --color-text:       var(--brand-velvet-950);
    --color-text-muted: rgba(4, 24, 17, 0.65);

    --color-primary:         var(--brand-velvet-800);
    --color-primary-hover:   var(--brand-velvet-900);
    --color-primary-fg:      var(--brand-cream-50);

    --color-accent:          var(--gold-display);
    --color-accent-text:     var(--gold-text-light);
    --color-accent-muted:    rgba(197, 160, 89, 0.15);
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

/* Base resets */
h1, h2, h3, h4, h5, h6 {
    font-family: 'Cinzel', serif;
}

/* ==========================================================================
   TAILWIND UTILITY EXTENSIONS & WOOCOMMERCE FALLBACKS
   ========================================================================== */

/* Star ratings global */
.star-rating span::before,
.star-rating::before {
    color: var(--color-accent) !important;
}

/* Gold divider utility */
.gold-divider {
    height: 1px;
    background: linear-gradient(90deg, transparent 0%, var(--color-accent) 50%, transparent 100%);
    margin: 2rem auto;
    width: 60%;
}

html.dark {
    /* ==========================================================================
       SEMANTIC TOKENS: DARK MODE
       ========================================================================== */
    --color-background: var(--brand-velvet-950);
    --color-surface:    var(--brand-velvet-900);
    --color-surface-elevated: var(--brand-velvet-800);
    --color-border:     rgba(223, 197, 138, 0.35);

    --color-text:       var(--brand-cream-100);
    --color-text-muted: rgba(246, 241, 216, 0.65);

    --color-primary:         var(--gold-display);
    --color-primary-hover:   var(--gold-text-dark);
    --color-primary-fg:      var(--brand-velvet-950);

    --color-accent:          var(--gold-display);
    --color-accent-text:     var(--gold-text-dark);
    --color-accent-muted:    rgba(197, 160, 89, 0.2);
}