/* ============================================================
   VENUE COPILOT — GLOBAL BRAND KIT
   This file defines the universal brand identity:
   - Color palette
   - Typography scale
   - Spacing scale
   - Logo-circle component
   - Brand card component
   - Brand button component
   - Brand text utilities
   - Brand background utilities
   ============================================================ */


/* ------------------------------------------------------------
   1. BRAND COLOR PALETTE
   ------------------------------------------------------------ */
:root {
    /* Existing brand colors */
    --charcoal: #1a1a1a;
    --gold: #d4af37;
    --offwhite: #f3f4f6;

    /* Extended brand palette */
    --charcoal-light: #374151;
    --text-muted-light: #d1d5db;

    /* Status colors */
    --gold-light: #fff7d6;
    --gold-dark: #b08900;

    --green-light: #d1fae5;
    --green-dark: #065f46;

    --red-light: #fee2e2;
    --red-dark: #991b1b;

    /* Links + focus */
    --link-color: #2563eb;
    --focus-ring: rgba(37, 99, 235, 0.25);

    /* Accent colors */
    --accent-blue: #4a69bd;

    /* Text colors */
    --text-dark: #1f2937;
    --text-normal: #333;
    --text-muted: #666;

    /* Background */
    --background: #fafafa;

    /* Shadows */
    --shadow-soft: 0 2px 8px rgba(0, 0, 0, 0.06);
    --shadow-medium: 0 4px 20px rgba(0, 0, 0, 0.08);

    /* Border radius scale */
    --radius-sm: 6px;
    --radius-md: 8px;
    --radius-lg: 12px;

    /* Spacing scale */
    --space-xs: 6px;
    --space-sm: 12px;
    --space-md: 20px;
    --space-lg: 32px;
    --space-xl: 48px;

    /* Typography scale */
    --font-xs: 12px;
    --font-sm: 14px;
    --font-md: 16px;
    --font-lg: 20px;
    --font-xl: 28px;

    --border-light: #ddd;
}


/* ------------------------------------------------------------
   2. LOGO CIRCLE (GLOBAL BRAND ANCHOR)
   Used in:
   - base.html navbar
   - base_dashboard.html navbar
   ------------------------------------------------------------ */
.vc-logo-circle {
    width: 28px;
    height: 28px;
    background: var(--gold);
    border-radius: 50%;
    display: inline-block;
    background-image: url("data:image/svg+xml;utf8,\
        <svg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 28 28'>\
            <circle cx='14' cy='14' r='14' fill='%23D4AF37'/>\
            <text x='50%' y='50%' text-anchor='middle' dominant-baseline='central'\
                font-family='Inter, sans-serif' font-size='16' font-weight='700' fill='%2300C957'>V</text>\
        </svg>");
    background-repeat: no-repeat;
    background-position: center;
}

.vc-logo-circle-favicon {
    width: 24px;
    height: 24px;
    background: var(--gold);
    border-radius: 50%;
    display: inline-block;
    background-image: url("data:image/svg+xml;utf8,\
        <svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'>\
            <circle cx='12' cy='12' r='12' fill='%23D4AF37'/>\
            <text x='50%' y='50%' text-anchor='middle' dominant-baseline='central'\
                font-family='Inter, sans-serif' font-size='14' font-weight='700' fill='%23FFFFFF'>V</text>\
        </svg>");
    background-repeat: no-repeat;
    background-position: center;
}
/* ------------------------------------------------------------
   3. BRAND CARD COMPONENT
   Used across:
   - public pages
   - dashboard pages
   - accounts pages
   ------------------------------------------------------------ */
.vc-card {
    background: #fff;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-soft);
    padding: var(--space-lg);
}


/* ------------------------------------------------------------
   4. BRAND BUTTON COMPONENT
   Used across:
   - public pages
   - dashboard pages
   - accounts pages
   ------------------------------------------------------------ */
.vc-btn {
    background: var(--gold);
    color: var(--charcoal);
    border-radius: var(--radius-md);
    font-weight: 600;
    padding: var(--space-sm) var(--space-md);
    text-decoration: none;
    display: inline-block;
}

.vc-btn:hover {
    background: #c9a63a;
    /* slightly darker gold */
}


/* ------------------------------------------------------------
   5. BRAND TEXT UTILITIES
   ------------------------------------------------------------ */
.text-dark {
    color: var(--text-dark);
}

.text-normal {
    color: var(--text-normal);
}

.text-muted {
    color: var(--text-muted);
}


/* ------------------------------------------------------------
   6. BRAND BACKGROUND UTILITIES
   ------------------------------------------------------------ */
.bg-brand {
    background: var(--background);
}

.bg-charcoal {
    background: var(--charcoal);
    color: var(--offwhite);
}

.bg-gold {
    background: var(--gold);
    color: var(--charcoal);
}


/* ------------------------------------------------------------
   7. BRAND BORDER UTILITIES
   ------------------------------------------------------------ */
.border-gold {
    border: 2px solid var(--gold);
}

.border-charcoal {
    border: 2px solid var(--charcoal);
}

.border-light {
    border: 2px solid var(--border-light);
}