/* ============================================
   FLICKO THEME - MASTER COLOR VARIABLES
   Single source of truth for the theme palette.
   Edit values here; do not hardcode colors in templates.
   ============================================ */

:root {
    /* Background Colors (match head.tpl actual rendering) */
    --bg-primary: #0a0d27;          /* page body */
    --bg-secondary: #0a0d27;        /* top header */
    --bg-card: #0a0d27;             /* panels/cards */
    --bg-sidebar: #0a0d27;          /* left sidebar */
    --bg-input: #0a0d27;            /* form inputs */
    --bg-hover: rgba(79,125,243,0.1);

    /* Accent Colors (theme uses #4F7DF3 throughout head.tpl) */
    --accent-blue: #4F7DF3;
    --accent-blue-light: #6E9BFF;
    --accent-blue-dark: #3B5FC7;
    --accent-blue-glow: rgba(79, 125, 243, 0.3);
    --icon-color: #4F7DF3;

    /* Text Colors */
    --text-primary: #ffffff;
    --text-secondary: #e4e4e7;
    --text-muted: #a1a1aa;
    --text-disabled: #71717a;

    /* Border Colors */
    --border-color: #1a1a2e;
    --border-hover: #4F7DF3;
    --border-active: #4F7DF3;
    --divider-color: rgba(255, 255, 255, 0.08);

    /* State Colors */
    --success: #22c55e;
    --warning: #f59e0b;
    --error: #ef4444;
    --info: #3b82f6;

    /* Shadows */
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.2);
    --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.3);
    --shadow-lg: 0 8px 30px rgba(0, 0, 0, 0.4);
    --shadow-glow: 0 4px 15px rgba(79, 125, 243, 0.3);
    --shadow-glow-hover: 0 8px 25px rgba(79, 125, 243, 0.45);

    /* Transitions */
    --transition-fast: 0.15s ease;
    --transition-normal: 0.3s ease;
    --transition-slow: 0.5s ease;

    /* Border Radius */
    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 16px;
    --radius-xl: 20px;
    --radius-full: 50px;

    /* Spacing */
    --spacing-xs: 8px;
    --spacing-sm: 12px;
    --spacing-md: 20px;
    --spacing-lg: 30px;
    --spacing-xl: 40px;

    /* Layout */
    --header-height: 70px;
    --sidebar-width: 260px;
}