/* ============================================================
   SETCOLOR.CSS — Central Color & Brand Variables
   Edit here to retheme the entire site in one place.
   ============================================================ */

:root {
  /* ── Brand Identity ─────────────────────────── */
  --brand-name: "JOSHOKI";

  /* ── Primary Palette (Purple) ───────────────── */
  --color-primary:        #8C32CF;   /* Purple — main brand accent         */
  --color-primary-dark:   #6B1FA8;   /* Darker purple — hover states       */
  --color-primary-light:  #B06EFF;   /* Light purple — soft highlights     */
  --color-primary-glow:   rgba(140, 50, 207, 0.28); /* Glow / shadow       */

  /* ── Gold Accent ────────────────────────────── */
  --color-gold:           #FFD700;   /* Gold — secondary accent            */
  --color-gold-dark:      #D4A800;   /* Darker gold — hover states         */

  /* ── Background Palette ─────────────────────── */
  --color-bg-darkest:     #070412;   /* Page / body background             */
  --color-bg-dark:        #100825;   /* Section / card background          */
  --color-bg-medium:      #1A0F35;   /* Elevated cards                     */
  --color-bg-light:       #271548;   /* Borders, dividers, subtle areas    */

  /* ── Text Palette ───────────────────────────── */
  --color-text-primary:   #FFFFFF;   /* Headlines                          */
  --color-text-secondary: #CEC0E8;   /* Body copy                          */
  --color-text-muted:     #7B6A9E;   /* Labels, captions                   */
  --color-text-accent:    #FFD700;   /* Highlighted / branded text (gold)  */

  /* ── Status Colors ──────────────────────────── */
  --color-success:        #28A745;
  --color-warning:        #FFC107;
  --color-danger:         #DC3545;
  --color-info:           #17A2B8;

  /* ── Border & Shadow ────────────────────────── */
  --color-border:         rgba(140, 50, 207, 0.22);
  --color-border-subtle:  rgba(255, 255, 255, 0.06);
  --shadow-card:          0 4px 24px rgba(0, 0, 0, 0.55);
  --shadow-glow:          0 0 20px rgba(140, 50, 207, 0.40);
  --shadow-nav:           0 2px 16px rgba(0, 0, 0, 0.65);

  /* ── Gradients ──────────────────────────────── */
  --gradient-brand:       linear-gradient(135deg, #FFD700 0%, #D4A800 100%);
  --gradient-dark:        linear-gradient(180deg, #100825 0%, #070412 100%);
  --gradient-hero:        linear-gradient(135deg, #070412 0%, #1A0F35 50%, #070412 100%);
  --gradient-card-hover:  linear-gradient(135deg, rgba(140,50,207,0.12) 0%, transparent 100%);

  /* ── Overlay ────────────────────────────────── */
  --overlay-dark:         rgba(7, 4, 18, 0.80);
  --overlay-brand:        rgba(140, 50, 207, 0.08);

  /* ── Typography ─────────────────────────────── */
  --font-primary:         'Poppins', sans-serif;
  --font-size-base:       16px;

  /* ── Spacing & Radius ───────────────────────── */
  --radius-sm:            6px;
  --radius-md:            12px;
  --radius-lg:            20px;
  --radius-pill:          999px;

  /* ── Transitions ────────────────────────────── */
  --transition-fast:      0.2s ease;
  --transition-normal:    0.35s ease;
  --transition-slow:      0.55s ease;

  /* ── Z-Index Scale ──────────────────────────── */
  --z-base:     1;
  --z-dropdown: 100;
  --z-sticky:   200;
  --z-overlay:  300;
  --z-modal:    400;
  --z-toast:    500;
}