/* ORAVYS Brand Variables  -  Phase 5 / Design System v2 (2026-05-17) */
/* Aligned with home_v2 design language: neutral blacks, Inter+Geist Mono, no cyan defaults */

/* ═══════════════════════════════════════════════════════════════════════════════
   HOW TO USE
   Add to every template that needs brand tokens:
     <link rel="stylesheet" href="/static/css/brand-variables.css">
   Place this BEFORE any page-specific <style> blocks so page styles can
   override tokens via the same custom-property names.
   ═══════════════════════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════════════════════
   1. BRAND PALETTE  -  Core violet / indigo scale
   ═══════════════════════════════════════════════════════════════════════════════ */
:root {
    /* Violet scale (Tailwind violet) */
    --violet-900: #1e1b4b;
    --violet-800: #2e1065;
    --violet-700: #4c1d95;
    --violet-600: #7c3aed;
    --violet-500: #8b5cf6;
    --violet-400: #a78bfa;
    --violet-300: #c4b5fd;

    /* Indigo scale */
    --indigo-600: #6366f1;
    --indigo-500: #818cf8;
    --indigo-400: #4f46e5;

    /* Accent tones (v2: gold elevated, cyan deprecated) */
    --accent-glow:  #a78bfa;   /* violet-400  -  dominant glow / text shimmer */
    --accent-gold:  #c0a062;   /* warm gold  -  second accent in v2 gradients */
    --accent-gold-aa: #d4b87a; /* AA-compliant gold on dark backgrounds (4.7:1 ratio vs #050507) */
    --accent-cyan:  #a78bfa;   /* DEPRECATED: was #66FCF1, now maps to violet for migration */
    --accent-cyan-dim: #7c3aed;

    /* Semantic colors */
    --success:  #10b981;  /* emerald-500 */
    --warning:  #f59e0b;  /* amber-500 */
    --danger:   #ef4444;  /* red-500 */
    --info:     #3b82f6;  /* blue-500 */
    --green:    #22c55e;  /* green-500  -  used in mood / positive scores */
    --cyan:     #06b6d4;  /* cyan-500 */
    --pink:     #ec4899;  /* pink-500 */
}

/* ═══════════════════════════════════════════════════════════════════════════════
   2. DARK BACKGROUND SYSTEM
   ═══════════════════════════════════════════════════════════════════════════════ */
:root {
    /* Page-level backgrounds (v2: neutral near-black, no purple tint) */
    --bg-deep:      #050507;    /* darkest  -  outermost body fill (v2 neutral) */
    --bg-body:      #0a0a0c;    /* standard body background */
    --bg-primary:   #050507;    /* alias used in CRM / admin templates */
    --bg-secondary: #0d0d0f;    /* sidebar / header surfaces */
    --bg-surface:   #121214;    /* elevated surface (inputs, panels) */
    --bg-card:      #0d0d0f;    /* card / drawer fill */

    /* Radial ambience (v2: violet + gold mesh, no cyan) */
    --bg-radial-cyan:   rgba(124, 58, 237, 0.08);  /* remapped from cyan to violet */
    --bg-radial-violet: rgba(124, 58, 237, 0.14);
    --bg-radial-indigo: rgba(79, 70, 229, 0.05);
    --bg-radial-gold:   rgba(192, 160, 98, 0.10);
}

/* ═══════════════════════════════════════════════════════════════════════════════
   3. GLASS MORPHISM TOKENS
   ═══════════════════════════════════════════════════════════════════════════════ */
:root {
    /* Glass fills (v2: neutral white-alpha, not purple-tinted) */
    --glass-bg:         rgba(10, 10, 12, 0.55);
    --glass-bg-light:   rgba(255, 255, 255, 0.025);
    --glass-bg-card:    rgba(255, 255, 255, 0.025);

    /* Glass borders (v2: white-alpha, subtle) */
    --glass-border:       rgba(255, 255, 255, 0.10);
    --glass-border-light: rgba(255, 255, 255, 0.06);
    --glass-border-cyan:  rgba(255, 255, 255, 0.08);  /* deprecated name, kept for compat */

    /* Glow shadows */
    --shadow-glow-violet: 0 0 30px rgba(124, 58, 237, 0.20);
    --shadow-glow-cyan:   0 0 30px rgba(124, 58, 237, 0.12);  /* remapped to violet */
    --shadow-sm:  0 2px  4px rgba(0, 0, 0, 0.05);
    --shadow-md:  0 4px 12px rgba(124, 58, 237, 0.08);
    --shadow-lg:  0 12px 24px rgba(124, 58, 237, 0.12);
    --shadow-xl:  0 20px 40px rgba(124, 58, 237, 0.16);
}

/* ═══════════════════════════════════════════════════════════════════════════════
   4. TYPOGRAPHY TOKENS
   ═══════════════════════════════════════════════════════════════════════════════ */
:root {
    /* Text hierarchy (v2: slightly muted secondary/muted for elegance) */
    --text-primary:   #ffffff;
    --text-main:      #ffffff;
    --text-secondary: #b4b4be;
    --text-muted:     #6a6a72;
    --text-dim:       #4a4a52;
    --text-soft:      #8a8a92;

    /* Font families (v2: Inter primary, Geist Mono for data/labels) */
    --font-display: 'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
    --font-body:    'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
    --font-mono:    'Geist Mono', 'SF Mono', 'Fira Code', monospace;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   5. GRADIENT TOKENS
   ═══════════════════════════════════════════════════════════════════════════════ */
:root {
    /* Primary UI gradients (v2: indigo-violet, no cyan) */
    --gradient-primary:  linear-gradient(135deg, #4F46E5, #7C3AED);
    --gradient-brand:    linear-gradient(135deg, #7c3aed, #a78bfa, #c0a062);
    --gradient-violet:   linear-gradient(135deg, #7c3aed, #6366f1);

    /* Text / clip gradients (v2: violet-white-gold signature) */
    --gradient-text:       linear-gradient(135deg, #a78bfa, #FFFFFF, #c0a062);
    --gradient-text-white: linear-gradient(180deg, #FFFFFF 0%, #a78bfa 100%);
    --gradient-text-cyan:  linear-gradient(135deg, #a78bfa, #c0a062);  /* deprecated: remapped */

    /* Shimmer overlay */
    --gradient-shimmer: linear-gradient(
        90deg,
        transparent 0%,
        rgba(167, 139, 250, 0.15) 50%,
        transparent 100%
    );

    /* Background body mesh (v2: animated radial mesh, not linear) */
    --gradient-body: radial-gradient(1600px 900px at 15% -10%, rgba(124, 58, 237, 0.14), transparent 55%),
                     radial-gradient(1200px 700px at 90% 100%, rgba(192, 160, 98, 0.10), transparent 55%),
                     radial-gradient(800px 600px at 50% 50%, rgba(79, 70, 229, 0.05), transparent 60%);
}

/* ═══════════════════════════════════════════════════════════════════════════════
   6. BORDER RADIUS & SPACING TOKENS
   ═══════════════════════════════════════════════════════════════════════════════ */
:root {
    --radius-xs:    4px;
    --radius-sm:    8px;
    --radius-md:   12px;
    --radius-lg:   16px;
    --radius-xl:   24px;
    --radius-round: 9999px;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   7. MOTION / EASING TOKENS
   ═══════════════════════════════════════════════════════════════════════════════ */
:root {
    --ease-out:    cubic-bezier(0.4, 0, 0.2, 1);
    --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
    --transition:  all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ═══════════════════════════════════════════════════════════════════════════════
   8. BORDER SHORTHAND
   ═══════════════════════════════════════════════════════════════════════════════ */
:root {
    --border-color:   rgba(255, 255, 255, 0.06);  /* v2: neutral white-alpha */
    --border-violet:  rgba(167, 139, 250, 0.25);
    --border-active:  rgba(167, 139, 250, 0.40);
}

/* ═══════════════════════════════════════════════════════════════════════════════
   9. @keyframes  -  Universal Brand Animations
   Included here because 30+ templates declare identical or near-identical
   versions.  Individual templates may still override these with local
   @keyframes of the same name  -  the last declaration wins per the cascade.
   ═══════════════════════════════════════════════════════════════════════════════ */

/* Slide up + fade in  -  most common entry animation (52+ templates) */
@keyframes fade-in-up {
    from { opacity: 0; transform: translateY(20px); }
    to   { opacity: 1; transform: translateY(0);    }
}

/* camelCase alias used by some templates */
@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(20px); }
    to   { opacity: 1; transform: translateY(0);    }
}

/* Slide down entry (dropdowns, toasts) */
@keyframes slideDown {
    from { opacity: 0; transform: translateY(-20px); }
    to   { opacity: 1; transform: translateY(0);     }
}

/* Slide in from left */
@keyframes slideIn {
    from { opacity: 0; transform: translateX(-20px); }
    to   { opacity: 1; transform: translateX(0);     }
}

/* Pulsing glow  -  box-shadow variant (buttons, active indicators) */
@keyframes pulse-glow {
    0%, 100% { box-shadow: 0 0 20px rgba(124, 58, 237, 0.30); }
    50%       { box-shadow: 0 0 40px rgba(124, 58, 237, 0.60); }
}

/* Generic pulse  -  opacity / scale (status dots, live badges) */
@keyframes pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%       { opacity: 0.5; transform: scale(1.05); }
}

/* Ring-expand pulse  -  used around record buttons */
@keyframes pulse-ring {
    0%  { box-shadow: 0 0 0 0   rgba(124, 58, 237, 0.40); }
    70% { box-shadow: 0 0 0 15px rgba(124, 58, 237, 0);   }
    100%{ box-shadow: 0 0 0 0   rgba(124, 58, 237, 0);    }
}

/* Horizontal shimmer sweep (premium badges, loading skeletons) */
@keyframes shimmer {
    0%   { background-position: -200% 0; }
    100% { background-position:  200% 0; }
}

/* Continuous 360-degree rotation (spinners, loaders) */
@keyframes spin {
    from { transform: rotate(0deg);   }
    to   { transform: rotate(360deg); }
}

/* Gentle scale breathe (mic orb, record button idle state) */
@keyframes breathe {
    0%, 100% { transform: scale(0.96); opacity: 0.70; }
    50%       { transform: scale(1.02); opacity: 1.00; }
}

/* Ambient float (background orbs, decorative blobs) */
@keyframes float {
    0%, 100% { transform: translateY(0px)   scale(1);   }
    50%       { transform: translateY(-12px) scale(1.02); }
}

/* Simple opacity fade in */
@keyframes fadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Pop-in scale entry (modals, tooltips) */
@keyframes popIn {
    from { opacity: 0; transform: scale(0.92); }
    to   { opacity: 1; transform: scale(1);    }
}

/* ═══════════════════════════════════════════════════════════════════════════════
   10. ANIMATION UTILITY CLASSES
   One-liner classes that pair with the keyframes above.
   ═══════════════════════════════════════════════════════════════════════════════ */

.fade-in-up  { animation: fade-in-up  0.6s var(--ease-out) both; }
.fade-in     { animation: fadeIn      0.5s var(--ease-out) both; }
.pop-in      { animation: popIn       0.4s var(--ease-spring) both; }
.slide-down  { animation: slideDown   0.35s var(--ease-out) both; }
.spin        { animation: spin        1s linear infinite; }
.breathe     { animation: breathe     3s ease-in-out infinite; }
.pulse-glow  { animation: pulse-glow  2s ease-in-out infinite; }
.pulse-ring  { animation: pulse-ring  2s ease-in-out infinite; }
.shimmer-anim{
    background-size: 200% auto;
    animation: shimmer 2.5s linear infinite;
}