/**
 * ==========================================================================
 * SHE SELLS — DESIGN SYSTEM COLOR TOKENS
 * ==========================================================================
 * Letisztult és logikusan felépített központi színrendszer.
 * ==========================================================================
 */

:root {
  /* ==========================================================================
     1. BRAND / ARANY PALETTA (Primary Brand Gold)
     ========================================================================== */
  --color-gold-subtle-bg:       #fff8e1; /* Halvány arany háttér (értesítők/kiemelések) */
  --color-gold-light:           #ffe000; /* Világos arany (gradiens kezdés) */
  --color-gold-metallic:        #c9a84c; /* Fémes arany (gradiens közép) */
  --color-gold:                 #ffbe00; /* FŐ MÁRKASZÍN (Brand Gold) */
  --color-gold-hover:           #e5a800; /* Arany hover állapot */
  --color-gold-deep:            #d97706; /* Mély borostyán arany (fókusz keretek / linkek) */
  --color-gold-dark-text:       #7a5c00; /* Sötét arany szöveg világos háttéren */

  /* ==========================================================================
     2. SÖTÉT FELÜLETEK ÉS HÁTTEREK (Obsidian & Dark Surfaces)
     ========================================================================== */
  --color-dark-bg:              #0d0d0d; /* Fő sötét oldalháttér */
  --color-dark-surface:         #141414; /* Kártya és doboz felületek */
  --color-dark-surface-alt:     #1f1f1f; /* Kiemelt felület / tagek / fejléc sáv */
  --color-dark-border:          #262626; /* Sötét szegélyek és elválasztók */

  /* ==========================================================================
     3. VILÁGOS ÉS MELEG FELÜLETEK (Warm Sand & Neutrals)
     ========================================================================== */
  --color-sand-bg:              #f3ebd7; /* Meleg homok/krém blokkháttér */
  --color-sand-border:          #d2c39a; /* Meleg homok szegély és elválasztó */
  --color-white:                #ffffff; /* Tiszta fehér */
  --color-gray-50:              #f8fafc; /* Nagyon világos felület */
  --color-gray-100:             #f3f4f6; /* Semleges világos felület */
  --color-gray-200:             #e5e7eb; /* Világos elválasztók és szegélyek */
  --color-gray-300:             #d1d5db; /* Beviteli mező szegélyek / inaktív gombok */
  --color-gray-400:             #9ca3af; /* Másodlagos leíró szöveg */
  --color-gray-500:             #6b7280; /* Elnémított / diszkrét szöveg */
  --color-gray-700:             #374151; /* Sötétszürke törzsszöveg és űrlap címkék */
  --color-gray-900:             #111827; /* Legmélyebb címsorszín világos nézetben */
  --color-black:                #000000; /* Tiszta fekete */

  /* ==========================================================================
     4. ÁLLAPOT- ÉS KIEMELŐ SZÍNEK (Accent & Status)
     ========================================================================== */
  --color-coral:                #ff6040; /* Korall kiemelő szín (Badgek, figyelmeztetések) */
  --color-danger-bg:            #fef2f2; /* Hiba doboz háttér */
  --color-danger-border:        #fecaca; /* Hiba doboz szegély */
  --color-danger:               #ef4444; /* Hiba élénk piros jelző */
  --color-danger-text:          #991b1b; /* Hiba szövegszín */

  /* ==========================================================================
     5. ÁTTETSZŐSÉGI (ALPHA) TOKENEK (Glassmorphism, Glow & Shadows)
     ========================================================================== */
  /* Fehér áttetszőségek (6 egyértelmű lépcső: 5%, 10%, 25%, 50%, 75%, 90%) */
  --color-white-alpha-5:        rgba(255, 255, 255, 0.05); /* Finom doboz háttér */
  --color-white-alpha-10:       rgba(255, 255, 255, 0.10); /* Finom szegély / inaktív háttér */
  --color-white-alpha-25:       rgba(255, 255, 255, 0.25); /* Közepes szegély / választóvonal */
  --color-white-alpha-50:       rgba(255, 255, 255, 0.50); /* Diszkrét szövegek / ikonok */
  --color-white-alpha-75:       rgba(255, 255, 255, 0.75); /* Másodlagos olvasható szöveg */
  --color-white-alpha-90:       rgba(255, 255, 255, 0.90); /* Elsődleges fényes szöveg */

  /* Arany áttetszőségek (3 egyértelmű lépcső: 10%, 20%, 35%) */
  --color-gold-alpha-10:        rgba(255, 190, 0, 0.10);  /* Finom arany derengés */
  --color-gold-alpha-20:        rgba(255, 190, 0, 0.20);  /* Közepes arany háttér (tagek) */
  --color-gold-alpha-35:        rgba(255, 190, 0, 0.35);  /* Arany szegély / fókuszkeret */

  /* Sötét és Fekete áttetszőségek / Árnyékok */
  --color-black-alpha-10:       rgba(0, 0, 0, 0.10);       /* Kisebb kártyaárnyék */
  --color-black-alpha-50:       rgba(0, 0, 0, 0.50);       /* Mély kártya- és modalárnyék */
  --color-dark-alpha-90:        rgba(13, 13, 13, 0.92);    /* Fejléc háttérelmosás */

  /* Korall áttetszőség */
  --color-coral-alpha-15:       rgba(255, 96, 64, 0.15);   /* Korall ragyogás / fókusz */

  /* ==========================================================================
     6. GRADIENSEK (Gradients)
     ========================================================================== */
  --grad-gold-text:             linear-gradient(90deg, var(--color-gold-light), var(--color-gold-metallic), var(--color-gold-light));
  --grad-gold-404:              linear-gradient(135deg, var(--color-gold-light) 0%, var(--color-gold) 50%, var(--color-gold-deep) 100%);
  --grad-gold-radial:           radial-gradient(ellipse at 60% 0%, var(--color-gold-alpha-10) 0%, transparent 70%);
  --grad-gold-dark:             linear-gradient(180deg, rgba(255, 190, 0, 0.06) 0%, rgba(20, 20, 20, 0.95) 100%);
  --grad-gold-spotlight:        radial-gradient(circle, var(--color-gold-alpha-10) 0%, transparent 70%);

  /* ==========================================================================
     7. VISSZAFELÉ KOMPATIBILIS ÉS SZEMANTIKUS ALIASOK (Semantic Aliases)
     ========================================================================== */
  --gold:                       var(--color-gold);
  --gold-hover:                 var(--color-gold-hover);
  --gold-grad:                  var(--grad-gold-text);
  --black:                      var(--color-dark-bg);
  --white:                      var(--color-white);
  --sand-bg:                    var(--color-sand-bg);
  --sand-border:                var(--color-sand-border);
  --light:                      var(--color-gray-100);
  --gray:                       var(--color-gray-500);
  --coral:                      var(--color-coral);

  --bg-dark:                    var(--color-dark-bg);
  --dark:                       var(--color-dark-surface);
  --surface-card:               var(--color-dark-surface);
  --surface-alt:                var(--color-dark-surface-alt);
  --border:                     var(--color-dark-border);
  --border-subtle:              var(--color-dark-surface-alt);
  --text-primary:               var(--color-gray-100);
  --text-secondary:             var(--color-gray-400);
  --text-muted:                 var(--color-gray-500);
}