/* ORAVYS Brand Variables — Phase 4A (2026-02-25) */
/* Extracted from 85+ templates to eliminate duplication */

/* ═══════════════════════════════════════════════════════════════════════════════
   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 */
    --accent-glow:  #a78bfa;   /* violet-400 — dominant glow / text shimmer */
    --accent-gold:  #c0a062;   /* warm gold — luxury separator / premium badge */
    --accent-cyan:  #66FCF1;   /* teal-cyan — used in Intuition / audio UI */
    --accent-cyan-dim: #45A29E;

    /* 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 */
    --bg-deep:      #050212;    /* darkest — outermost body fill */
    --bg-body:      #0f0524;    /* standard body background */
    --bg-primary:   #050212;    /* alias used in CRM / admin templates */
    --bg-secondary: #0a0520;    /* sidebar / header surfaces */
    --bg-surface:   #110830;    /* elevated surface (inputs, panels) */
    --bg-card:      #140a28;    /* card / drawer fill */

    /* Radial ambience (applied as background-image layers) */
    --bg-radial-cyan:   rgba(102, 252, 241, 0.08);
    --bg-radial-violet: rgba(124, 58, 237, 0.12);
    --bg-radial-indigo: rgba(79, 70, 229, 0.10);
}

/* ═══════════════════════════════════════════════════════════════════════════════
   3. GLASS MORPHISM TOKENS
   ═══════════════════════════════════════════════════════════════════════════════ */
:root {
    /* Glass fills */
    --glass-bg:         rgba(20, 10, 40, 0.60);
    --glass-bg-light:   rgba(30, 15, 60, 0.40);
    --glass-bg-card:    rgba(15,  8, 50, 0.85);

    /* Glass borders */
    --glass-border:       rgba(139, 92, 246, 0.30);
    --glass-border-light: rgba(139, 92, 246, 0.15);
    --glass-border-cyan:  rgba(102, 252, 241, 0.20);

    /* Glow shadows */
    --shadow-glow-violet: 0 0 30px rgba(124, 58, 237, 0.20);
    --shadow-glow-cyan:   0 0 30px rgba(102, 252, 241, 0.12);
    --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 */
    --text-primary:   #FFFFFF;
    --text-main:      #FFFFFF;                     /* alias */
    --text-secondary: rgba(255, 255, 255, 0.85);
    --text-muted:     rgba(255, 255, 255, 0.60);
    --text-dim:       rgba(255, 255, 255, 0.40);
    --text-soft:      #A8A4B8;                     /* used in CRM sidebar */

    /* Font families */
    --font-display: 'Space Grotesk', sans-serif;
    --font-body:    'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   5. GRADIENT TOKENS
   ═══════════════════════════════════════════════════════════════════════════════ */
:root {
    /* Primary UI gradients */
    --gradient-primary:  linear-gradient(145deg, #4F46E5, #7C3AED);
    --gradient-brand:    linear-gradient(135deg, #4F46E5, #7C3AED, #66FCF1);
    --gradient-violet:   linear-gradient(135deg, #7c3aed, #6366f1);

    /* Text / clip gradients */
    --gradient-text:       linear-gradient(135deg, #a78bfa, #c0a062);
    --gradient-text-white: linear-gradient(180deg, #FFFFFF 0%, #a78bfa 100%);
    --gradient-text-cyan:  linear-gradient(180deg, #FFFFFF 0%, #66FCF1 100%);

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

    /* Background body gradient */
    --gradient-body: radial-gradient(circle at 50% 0%,  rgba(124, 58, 237, 0.25) 0%, transparent 60%),
                     radial-gradient(circle at 85% 80%, rgba(79,  70, 229, 0.15) 0%, transparent 50%),
                     linear-gradient(180deg, var(--bg-body) 0%, var(--bg-deep) 100%);
}

/* ═══════════════════════════════════════════════════════════════════════════════
   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(102, 252, 241, 0.12);  /* default subtle border */
    --border-violet:  rgba(139, 92, 246, 0.25);
    --border-active:  rgba(102, 252, 241, 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;
}