/**
 * GokuMusic Design System Tokens (NEW BLACK & GOLD IDENTITY)
 * Extracted directly from New Logo: Wings Halo + Goku Gold (#F5DC32 / #EAB308) + Obsidian (#0B0F19)
 *
 * Theme: XStore Child / GokuMusic Brand Identity 2026
 * Style: Premium Pro Audio & Niche Instrument Marketplace (Marshall / Fender / Gibson aesthetic)
 */

:root {
  /* ==========================================================================
     1. Primary Brand Colors (Gold & Obsidian - From New Logo)
     ========================================================================== */

  /* Goku Brand Gold (Core Identity Accent) */
  --et-brand-gold:          #f5dc32; /* Primary Logo Yellow (#F5DC32 / #FACC15) */
  --et-brand-gold-warm:     #eab308; /* Balanced Amber Gold for interactive buttons & links */
  --et-brand-gold-deep:     #ca8a04; /* Deep Gold for icons & high-contrast elements on light surfaces */
  --et-brand-gold-dark:     #a16207; /* WCAG AA accessible text gold on pure white (4.5:1 ratio) */
  --et-brand-gold-hover:    #fde047; /* Hover brightness boost */
  --et-brand-gold-light:    #fef9c3; /* 10% subtle background tint for pills & active states */
  --et-brand-gold-border:   #fde68a; /* Border for gold tags & active card outlines */
  --et-brand-gold-shadow:   rgba(234, 179, 8, 0.35); /* Button glow */

  /* Obsidian & Charcoal (Logo Base & Header System) */
  --et-brand-black:         #000000; /* Pure Black (Logo Canvas) */
  --et-brand-obsidian:      #0b0f19; /* Main Header, Top Bar, Bottom Footer */
  --et-brand-charcoal:      #111827; /* Sub-navigation, Dropdown Menus, Dark Cards */
  --et-brand-surface-dark:  #1e293b; /* Dark Surface Elevate / Tooltips */
  --et-brand-border-dark:   #334155; /* Dividers on dark surfaces */

  /* Legacy Compatibility Alias (Points Green to New Gold/Dark Identity) */
  --et-brand-green:         var(--et-brand-gold-warm);
  --et-brand-green-dark:    var(--et-brand-obsidian);
  --et-brand-green-hover:   var(--et-brand-gold-hover);
  --et-brand-green-deep:    var(--et-brand-brand-gold-deep);
  --et-brand-green-light:   var(--et-brand-gold-light);
  --et-brand-green-border:  var(--et-brand-gold-border);

  /* ==========================================================================
     2. Neutral System & Typography Colors (High-Readability Light Canvas)
     ========================================================================== */
  --et-dark-color:          #0f172a; /* Slate 900: Primary headings & high-emphasis text */
  --et-dark-secondary:      #334155; /* Slate 700: Body copy & descriptions */
  --et-muted-color:         #64748b; /* Slate 500: Subtitles, breadcrumbs, specifications */
  --et-border-color:        #e2e8f0; /* Slate 200: Standard crisp card & section dividers */
  --et-border-light:        #f1f5f9; /* Slate 100: Soft inner card dividers */
  --et-bg-light:            #f8fafc; /* Slate 50: Neutral page section background */
  --et-bg-canvas:           #ffffff; /* Pure white card surface */
  --et-white:               #ffffff;

  /* ==========================================================================
     3. Commerce Action & Notification Colors
     ========================================================================== */
  --et-price-color:         #dc2626; /* Vibrant Ruby Red for Sale & Promo prices */
  --et-price-regular:       #94a3b8; /* Strikethrough regular price */
  --et-sale-badge:          #ef4444; /* Flash Deal / Discount Badge */
  --et-hot-badge:           #f97316; /* Hot Trending pill */
  --et-rating-gold:         #f59e0b; /* Star Rating gold (5-star review marks) */
  --et-success-color:       #16a34a; /* In-stock checkmarks & warranty verification */

  /* Third-party Brand Connections */
  --et-zalo-color:          #0068ff; /* Official Zalo Blue */
  --et-zalo-bg:             #eff6ff;

  /* ==========================================================================
     4. Typography Scales (Roboto / Pro Display)
     ========================================================================== */
  --font-family-system:     'Roboto', -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  --font-family-heading:    'Roboto', -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;

  --text-xs:    0.75rem;    /* 12px */
  --text-sm:    0.84375rem; /* 13.5px */
  --text-base:  0.9375rem;  /* 15px */
  --text-md:    1.0625rem;  /* 17px */
  --text-lg:    1.1875rem;  /* 19px */
  --text-xl:    1.375rem;   /* 22px */
  --text-2xl:   1.625rem;   /* 26px */
  --text-3xl:   2.000rem;   /* 32px */

  --font-weight-normal:     400;
  --font-weight-medium:     500;
  --font-weight-semibold:   600;
  --font-weight-bold:       700;
  --font-weight-extrabold:  800;

  --line-height-base:       1.6;
  --line-height-heading:    1.25;

  /* ==========================================================================
     5. Layout & Component Geometry
     ========================================================================== */
  --container-max-width:    1425px; /* Aligned 100% with XStore Header and Goku Home */
  --radius-xs:              3px;
  --radius-sm:              6px;
  --radius-md:              8px;
  --radius-lg:              12px;
  --radius-full:            9999px;

  /* Elevation Shadows */
  --shadow-xs:              0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-sm:              0 2px 6px rgba(0, 0, 0, 0.07);
  --shadow-md:              0 4px 14px rgba(0, 0, 0, 0.09);
  --shadow-lg:              0 10px 25px -5px rgba(0, 0, 0, 0.12);
  --shadow-gold-btn:        0 4px 14px rgba(234, 179, 8, 0.35);
  --shadow-gold-glow:       0 0 20px rgba(245, 220, 50, 0.25);
}