/* ============================================================
   kundli-theme.css — Global Design System Tokens
   Kundli App — AstroGPT-inspired theme
   DO NOT reference "astrogpt" anywhere
   ============================================================ */

/* ── Google Fonts (already loaded via _Layout, fallback here) ── */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&display=swap');

/* ── CSS Custom Properties ─────────────────────────────────── */
:root {
    /* --- Core Colors --- */
    --k-color-bg:          #040404;
    --k-color-purple-950:  #3b0764;
    --k-color-purple-900:  #4a044e;
    --k-color-purple-800:  #6b21a8;
    --k-color-purple-700:  #7c3aed;
    --k-color-purple-600:  #9333ea;
    --k-color-purple-400:  #c084fc;
    --k-color-purple-300:  #d8b4fe;
    --k-color-purple-200:  #e9d5ff;
    --k-color-purple-100:  #f3e8ff;
    --k-color-yellow-500:  #eab308;
    --k-color-blue-400:    #60a5fa;
    --k-color-pink-400:    #f472b6;

    /* --- Text --- */
    --k-text-primary:      #ffffff;
    --k-text-secondary:    #d8b4fe;   /* purple-300 */
    --k-text-muted:        #a1a1aa;   /* zinc-400 */
    --k-text-faint:        #71717a;   /* zinc-500 */

    /* --- Surfaces --- */
    --k-surface-card:      rgba(59, 7, 100, 0.65);   /* purple-950/65 */
    --k-surface-card-hover:rgba(59, 7, 100, 0.85);
    --k-surface-nav:       rgba(0, 0, 0, 0.90);
    --k-surface-input:     rgba(43, 5, 74, 0.75);    /* purple-950/75 */
    --k-surface-dropdown:  rgba(59, 7, 100, 0.95);
    --k-surface-footer:    rgba(59, 7, 100, 0.82);

    /* --- Borders --- */
    --k-border-card:       rgba(124, 58, 237, 0.40);  /* purple-700/40 */
    --k-border-input:      rgba(124, 58, 237, 0.60);
    --k-border-nav:        rgba(107, 33, 168, 0.30);

    /* --- Shadows --- */
    --k-shadow-sm:         0 2px 8px  rgba(109, 40, 217, 0.25);
    --k-shadow-md:         0 4px 20px rgba(109, 40, 217, 0.35);
    --k-shadow-lg:         0 8px 40px rgba(26, 26, 26, 0.712);
    --k-shadow-card:       0 2px 8px  rgba(124, 58, 237, 0.30);

    /* --- Spacing Scale --- */
    --k-space-1:  4px;
    --k-space-2:  8px;
    --k-space-3:  12px;
    --k-space-4:  16px;
    --k-space-5:  20px;
    --k-space-6:  24px;
    --k-space-8:  32px;
    --k-space-10: 40px;
    --k-space-12: 48px;
    --k-space-16: 64px;

    /* --- Border Radius --- */
    --k-radius-sm:   8px;
    --k-radius-md:   12px;
    --k-radius-lg:   16px;
    --k-radius-xl:   24px;
    --k-radius-full: 9999px;
    --k-radius-card-tl: 45px;
    --k-radius-card-br: 40px;

    /* --- Typography --- */
    --k-font-sans:    'Poppins', 'Noto Sans Devanagari', 'Noto Sans Gujarati', sans-serif;
    --k-font-size-xs: 0.75rem;
    --k-font-size-sm: 0.875rem;
    --k-font-size-md: 1rem;
    --k-font-size-lg: 1.125rem;
    --k-font-size-xl: 1.25rem;
    --k-font-size-2xl:1.5rem;
    --k-font-size-3xl:1.875rem;
    --k-font-size-4xl:2.25rem;
    --k-font-size-5xl:3rem;
    --k-font-size-hero: clamp(2.5rem, 7vw, 5.5rem);

    /* --- Transitions --- */
    --k-transition-fast:   150ms ease-in-out;
    --k-transition-base:   280ms ease-in-out;
    --k-transition-slow:   400ms ease-in-out;

    /* --- Layout --- */
    --k-max-width:  1280px;
    --k-nav-height: 64px;
}

/* ── Global Reset & Base ────────────────────────────────────── */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

*::selection {
    background-color: white;
    color: var(--k-color-purple-700);
}

*::-webkit-scrollbar {
    width: 4px;
    background-color: var(--k-color-bg);
}

*::-webkit-scrollbar-thumb {
    background-color: var(--k-color-purple-700);
    border-radius: 2px;
}

/* ── Cosmic Background ──────────────────────────────────────── */
body.kundli-cosmic {
    background-color: var(--k-color-bg);
    color: var(--k-text-primary);
    font-family: var(--k-font-sans);
    min-height: 100vh;
}

.kundli-bg-fixed {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100vh;
    object-fit: cover;
    object-position: center;
    filter: brightness(0.75);
    z-index: -40;
    pointer-events: none;
}

/* ── Keyframe Animations ────────────────────────────────────── */
@keyframes kundli-rotate {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

@keyframes kundli-shimmer {
    from { background-position: -1000px 0; }
    to   { background-position:  1000px 0; }
}

@keyframes kundli-fade-in {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes kundli-pulse-glow {
    0%, 100% { box-shadow: 0 0 0 0 rgba(124,58,237,0); }
    50%       { box-shadow: 0 0 20px 4px rgba(124,58,237,0.4); }
}

@keyframes kundli-spin {
    from { transform: translateY(-50%) rotate(0deg); }
    to   { transform: translateY(-50%) rotate(360deg); }
}