/**
 * brand.css — CitadelVest Pro
 * =============================================================
 * This is the ONLY file you need to change to rebrand the platform.
 * Update the 5 variables below and every page updates automatically.
 *
 * HOW TO USE:
 * 1. Change the hex values below to your brand colors
 * 2. Recalculate --primary-light using your RGB equivalent:
 *    e.g. #1a73e8 = RGB(26, 115, 232) → rgba(26, 115, 232, 0.1)
 * 3. Update --brand-gradient with both colors
 * 4. Save — done. All 16 pages update automatically.
 *
 * HOW TO FIND YOUR BRAND COLORS:
 * - Use your logo? Try imagecolorpicker.com to extract hex codes
 * - Need inspiration? Try coolors.co or palettemaker.com
 * - Want a gradient? Try uigradients.com
 * =============================================================
 */
/* Sovereign theme brand.css */
:root {
    /* ── Primary brand color ──────────────────────────────────
       Used for: buttons, links, active nav items, badges,
       progress bars, chart highlights, step numbers.
       Default: violet-blue #667eea
    ─────────────────────────────────────────────────────────── */
    --primary: #667eea;

    /* ── Darker variant ───────────────────────────────────────
       Used for: gradient end, hover states, pressed buttons,
       heading accents.
       Rule: ~20-30% darker than --primary.
       Default: purple #764ba2
    ─────────────────────────────────────────────────────────── */
    --primary-dark: #764ba2;

    /* ── Light transparent variant ────────────────────────────
       Used for: card backgrounds, hover backgrounds,
       selected states, icon backgrounds.
       Rule: set --primary-rgb to the RGB of --primary, then this auto-follows.
       Example: --primary: #0066CC → --primary-rgb: 0, 102, 204
    ─────────────────────────────────────────────────────────── */
    --primary-light: rgba(102, 126, 234, 0.1);
    --primary-rgb: 102, 126, 234; /* ← manually match the RGB here, using https://www.rapidtables.com/convert/color/hex-to-rgb.html */

    /* ── Accent / success color ───────────────────────────────
       Used for: success states, positive balance changes,
       "approved" badges, deposit confirmed icons.
       Usually keep green unless your brand requires otherwise.
    ─────────────────────────────────────────────────────────── */
    --accent: #4CAF50;

    /* ── Gradient ─────────────────────────────────────────────
       Used for: hero sections, card headers, buttons (some),
       loading bars.
       Update both color values to match --primary and --primary-dark.
    ─────────────────────────────────────────────────────────── */
    --brand-gradient: linear-gradient(135deg, #667eea, #764ba2);
    --on-primary: #ffffff;
    
}



/* =============================================================
   SECONDARY THEME VARIABLES
   These are derived from the brand colors above but handle
   specific UI contexts. Change these if the auto-derived
   values don't look right for your brand.
   ============================================================= */

:root {
    /* Text colors */
    --text-primary: #1a1a2e;         /* Main body text (dark mode overrides this) */
    --text-secondary: #4a5568;       /* Labels, secondary info */
    --text-muted: #718096;           /* Placeholder text, hints */

    /* Background colors */
    --bg-primary: #ffffff;           /* Page background */
    --bg-secondary: #f7f8fc;         /* Card backgrounds, sidebars */
    --bg-card: #ffffff;              /* Card surface */

    /* Border colors */
    --border-light: #e8ecf4;         /* Light borders between elements */
    --border-medium: #d1d9e0;        /* Input borders, dividers */

    /* Status colors (usually leave these as-is) */
    --success: #4CAF50;              /* Green: approved, confirmed, active */
    --warning: #ff9800;              /* Orange: pending, processing */
    --danger: #f44336;               /* Red: rejected, error, loss */
    --info: #2196f3;                 /* Blue: informational, neutral status */

    /* Investment status colors */
    --investment-active: var(--primary);
    --investment-complete: var(--success);
    --investment-paused: var(--warning);

    /* Shadow */
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.06);
    --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.10);
    --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.14);

    /* Border radius */
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 20px;
    --radius-full: 50px;

    /* Font */
    --font-main: 'Poppins', sans-serif;
}


/* =============================================================
   DARK MODE OVERRIDES
   These apply when <body> has class "dark-mode".
   If you change --primary and --primary-dark above,
   you usually don't need to change anything here.
   ============================================================= */

body.dark-mode {
    --text-primary: #e2e8f0;
    --text-secondary: #a0aec0;
    --text-muted: #718096;
    --bg-primary: #0f0f1a;
    --bg-secondary: #1a1a2e;
    --bg-card: #16213e;
    --border-light: #2d3748;
    --border-medium: #4a5568;
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.5);
}


/* =============================================================
   GLOBAL ELEMENT STYLES
   Applied universally using the variables above.
   These give all pages baseline consistency without
   repeating declarations in every page CSS file.
   ============================================================= */

/* Primary buttons */
.btn-primary,
button.primary,
input[type="submit"].primary {
    background: var(--brand-gradient);
    color: #ffffff;
    border: none;
    border-radius: var(--radius-md);
    padding: 12px 24px;
    font-family: var(--font-main);
    font-weight: 600;
    cursor: pointer;
    transition: opacity 0.2s, transform 0.1s;
}

.btn-primary:hover,
button.primary:hover {
    opacity: 0.92;
    transform: translateY(-1px);
}

.btn-primary:active,
button.primary:active {
    transform: translateY(0);
}

/* Outline buttons */
.btn-outline {
    background: transparent;
    color: var(--primary);
    border: 2px solid var(--primary);
    border-radius: var(--radius-md);
    padding: 10px 22px;
    font-family: var(--font-main);
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s, color 0.2s;
}

.btn-outline:hover {
    background: var(--primary-light);
}

/* Links */
a {
    color: var(--primary);
    text-decoration: none;
    transition: color 0.2s;
}

a:hover {
    color: var(--primary-dark);
}

/* Focus ring (accessibility) */
*:focus-visible {
    outline: 3px solid var(--primary);
    outline-offset: 2px;
}

/* Status badges */
.badge {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    border-radius: var(--radius-full);
    font-size: 0.78rem;
    font-weight: 600;
}

.badge-success { background: rgba(76, 175, 80, 0.12); color: #2e7d32; }
.badge-warning { background: rgba(255, 152, 0, 0.12); color: #e65100; }
.badge-danger  { background: rgba(244, 67, 54, 0.12); color: #c62828; }
.badge-info    { background: rgba(33, 150, 243, 0.12); color: #1565c0; }
.badge-primary { background: var(--primary-light); color: var(--primary-dark); }

/* Cards */
.card {
    background: var(--bg-card);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--border-light);
    padding: 24px;
}

/* Input fields */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="tel"],
select,
textarea {
    border: 1.5px solid var(--border-medium);
    border-radius: var(--radius-sm);
    padding: 10px 14px;
    font-family: var(--font-main);
    font-size: 0.9rem;
    color: var(--text-primary);
    background: var(--bg-primary);
    transition: border-color 0.2s, box-shadow 0.2s;
    width: 100%;
}

input:focus,
select:focus,
textarea:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px var(--primary-light);
}

/* Progress bar */
.progress-bar-track {
    background: var(--border-light);
    border-radius: var(--radius-full);
    height: 8px;
    overflow: hidden;
}

.progress-bar-fill {
    background: var(--brand-gradient);
    height: 100%;
    border-radius: var(--radius-full);
    transition: width 0.5s ease;
}

/* Loading spinner */
.spinner {
    width: 24px;
    height: 24px;
    border: 3px solid var(--primary-light);
    border-top-color: var(--primary);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}


/* =============================================================
   HOW TO ADD THIS FILE TO YOUR PROJECT
   =============================================================
   Add this line in the <head> of EVERY HTML page,
   BEFORE any other CSS file:

   <link rel="stylesheet" href="/css/brand.css">

   That's it. The variables cascade into all other stylesheets.

   If a page has its own CSS that uses var(--primary) etc,
   it will automatically pick up your brand colors.
   ============================================================= */