/* ========================================
   PALETTE.CSS - RoleplayPS Color System
   Unified theme combining Medieval, Kingdom, Modern, Soft, and Professional Game aesthetics
======================================== */

:root {
    /* ================================
        🎨 PRIMARY BRAND COLORS (Professional Game + Medieval)
     ================================ */
    --primary: #B88A00;
    /* Gold base - logo, highlight, glow */
    --secondary: #2E4A8C;
    /* Royal blue - modern professional accent */
    --accent: #C93A3A;
    /* Royal red - kingdom accent */

    /* ================================
        🟡 GOLD/TREASURE COLORS (Medieval Theme)
     ================================ */
    --gold-dark: #8C6A00;
    /* Dark gold - shadow */
    --gold-base: #B88A00;
    /* Base gold - primary */
    --gold-highlight: #FFD700;
    /* Bright gold - accent */
    --gold-shine: #FFF07A;
    /* Shine - highlights */

    /* ================================
        🔵 ROYAL/PROFESSIONAL COLORS (Kingdom + Professional Game)
     ================================ */
    --royal-dark: #1C2C5A;
    /* Dark blue - royal accent */
    --royal-base: #2E4A8C;
    /* Base blue - royal accent */
    --royal-light: #5F7FE0;
    /* Light blue - royal accent */

    /* ================================
        🔴 KINGDOM/ROYAL COLORS
     ================================ */
    --red-dark: #8C1C1C;
    /* Dark red - royal accent */
    --red-base: #C93A3A;
    /* Base red - royal accent */
    --red-highlight: #E05A5A;
    /* Highlight red - royal accent */

    /* ================================
        🟤 EARTH/WOOD COLORS (Medieval Theme)
     ================================ */
    --earth-dark: #3B2F2F;
    /* Dark brown - outline/shadow kuat */
    --earth-mid: #5A4634;
    /* Mid brown - secondary */
    --earth-wood: #7A5C3E;
    /* Wood tone - primary */
    --earth-light: #A17A4A;
    /* Light wood - highlight */

    /* ================================
        ⚪ NEUTRAL COLORS (Soft + Professional)
     ================================ */
    --neutral-darker: #0A0A0F;
    /* Very dark background */
    --neutral-dark: #121218;
    /* Dark background */
    --neutral-mid: #1E1E26;
    /* Card backgrounds */
    --neutral-light: #2A2A36;
    /* Lighter elements */
    --neutral-lighter: #3A3A4A;
    /* Highlights */

    /* ================================
        ✏️ TEXT COLORS (Professional Game)
     ================================ */
    --text-primary: #F0F0F5;
    /* Primary text */
    --text-secondary: #D0D0DA;
    /* Secondary text */
    --text-tertiary: #A0A0B0;
    /* Tertiary text */
    --text-muted: #707080;
    /* Muted text */

    /* ================================
        🔲 BORDER & GLOW EFFECTS
     ================================ */
    --border-dark: rgba(184, 138, 0, 0.1);
    /* Dark borders */
    --border-mid: rgba(184, 138, 0, 0.2);
    /* Medium borders */
    --border-light: rgba(184, 138, 0, 0.3);
    /* Light borders */
    --glow: rgba(184, 138, 0, 0.4);
    /* Glow effect */

    /* ================================
       💬 COMMUNITY PLATFORM COLORS
    ================================ */
    --discord: #5865f2;
    /* Discord brand */
    --whatsapp: #25D366;
    /* WhatsApp brand */
    --tiktok: #FF0050;
    /* TikTok brand */

    /* ================================
        📐 SPACING & RADIUS (Modern + Professional)
     ================================ */
    --radius-sm: 6px;
    /* Small radius */
    --radius: 10px;
    /* Standard radius */
    --radius-lg: 16px;
    /* Large radius */
    --radius-xl: 24px;
    /* Extra large radius */

    /* ===============================
       🔤 FONTS (Professional + Medieval)
     ================================ */
    --font-display: 'Cinzel', serif;
    /* Display font - medieval royal */
    --font-heading: 'Cinzel', serif;
    /* Heading font - same as display */
    --font-body: 'Crimson Text', serif;
    /* Body font - readable */
    --font-ui: 'Segoe UI', 'Roboto', 'Helvetica Neue', sans-serif;
    /* UI font - modern */

    /* ================================
       ⚡ TRANSITIONS
    ================================ */
    --transition: 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    --transition-fast: 0.2s ease;
    --transition-smooth: 0.4s ease-out;
}