@charset "UTF-8";

/* ==========================================================================
   Jiinubi Platform — WHMCS Twenty-One Theme
   Custom Brand Stylesheet
   Primary: #020617  |  Accent: #00ff7f
   ========================================================================== */

:root {
    /* ── Primary Scale (Deep Navy-Black) ─────────────────────────────────── */
    --primary:          #020617;   /* Base */
    --primary-rgb:      2, 6, 23;
    --primary-dark:     #010410;   /* Deeper, hover states */
    --primary-light:    #0d1b3e;   /* Lifted panels/cards */
    --primary-muted:    #1e2d52;   /* Borders, dividers on dark bg */
    --primary-surface:  #0a1628;   /* Mid-dark surface */

    /* ── Accent Scale (Neon Spring Green) ───────────────────────────────── */
    --accent:           #00ff7f;   /* Base */
    --accent-rgb:       0, 255, 127;
    --accent-dark:      #00cc66;   /* Hover/pressed */
    --accent-light:     #33ff99;   /* Light glow variant */
    --accent-muted:     rgba(0, 255, 127, 0.12); /* Ghost fills */
    --accent-glow:      0 0 18px rgba(0, 255, 127, 0.35);

    /* ── Semantic / Functional Palette ──────────────────────────────────── */
    --success:          #00e676;   /* Green (aligned with accent family) */
    --info:             #29b6f6;   /* Sky blue */
    --warning:          #ffca28;   /* Amber */
    --danger:           #ef5350;   /* Red */

    /* ── Neutral Text Scale ─────────────────────────────────────────────── */
    --text-primary:     #e2e8f0;   /* Main body text on dark bg */
    --text-secondary:   #94a3b8;   /* Subdued / meta text */
    --text-muted:       #64748b;   /* Placeholders, disabled */
    --text-inverse:     #020617;   /* Text on accent bg */
    --text-heading:     #f1f5f9;   /* Headings on dark bg */

    /* ── Surface & Background ───────────────────────────────────────────── */
    --bg-main:          #020617;   /* Page background */
    --bg-card:          #0a1628;   /* Card / panel surface */
    --bg-elevated:      #0d1b3e;   /* Modals, dropdowns */
    --bg-input:         #0f1f3d;   /* Form inputs */

    /* ── Borders ─────────────────────────────────────────────────────────── */
    --border-soft:      rgba(0, 255, 127, 0.08);
    --border-medium:    rgba(0, 255, 127, 0.18);
    --border-strong:    rgba(0, 255, 127, 0.35);

    /* ── Elevation / Shadows ────────────────────────────────────────────── */
    --shadow-sm:        0 1px 3px rgba(0, 0, 0, 0.5);
    --shadow-md:        0 4px 12px rgba(0, 0, 0, 0.6), 0 1px 3px rgba(0, 0, 0, 0.4);
    --shadow-lg:        0 12px 32px rgba(0, 0, 0, 0.7), 0 4px 8px rgba(0, 0, 0, 0.5);
    --shadow-accent:    0 4px 20px rgba(0, 255, 127, 0.2);

    /* ── Standard Bootstrap-style extensions ────────────────────────────── */
    --blue: #007bff;
    --indigo: #6610f2;
    --purple: #6f42c1;
    --pink: #e83e8c;
    --red: #dc3545;
    --orange: #fd7e14;
    --yellow: #ffc107;
    --green: #28a745;
    --teal: #20c997;
    --cyan: #17a2b8;
    --white: #fff;
    --gray: #6c757d;
    --gray-dark: #343a40;
    --secondary: #6c757d;
    --light: #f8f9fa;
    --dark: #343a40;
    --breakpoint-xs: 0;
    --breakpoint-sm: 576px;
    --breakpoint-md: 768px;
    --breakpoint-lg: 992px;
    --breakpoint-xl: 1200px;
    --font-family-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    --font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

/* ── Custom Animations & Utility Classes ────────────────────────────── */

@keyframes ai-glow-pulse {
    0% {
        box-shadow: 0 0 5px var(--accent-muted), 0 0 10px rgba(0, 255, 127, 0.2);
    }
    50% {
        box-shadow: 0 0 20px var(--accent), 0 0 30px var(--accent-light);
    }
    100% {
        box-shadow: 0 0 5px var(--accent-muted), 0 0 10px rgba(0, 255, 127, 0.2);
    }
}