/* Ruyagram Design Tokens - Derived from Tasarim_ornekleri Variant 3 */
:root {
    /* Color Palette */
    --color-primary: #7f13ec;
    --color-primary-rgb: 127, 19, 236;

    --color-gold: #ffd700;
    --color-gold-rgb: 255, 215, 0;

    --color-bg-dark: #0a070e;
    --color-obsidian: #141118;
    --color-obsidian-rgb: 20, 17, 24;

    --color-text-main: #ffffff;
    --color-text-muted: #ab9db9;

    /* Gradients */
    --gradient-mystic-border: linear-gradient(135deg, #7f13ec 0%, #ffd700 50%, #7f13ec 100%);
    --gradient-nebula: radial-gradient(circle at 50% 50%, rgba(127, 19, 236, 0.15) 0%, rgba(10, 7, 14, 1) 70%);

    /* Typography */
    --font-display: 'Inter', sans-serif;

    /* Spacing & Radius */
    --radius-lg: 1.5rem;
    /* 24px */
    --radius-xl: 2rem;
    /* 32px */

    /* Shadows & Glows */
    --shadow-mic-glow: 0 0 30px 5px rgba(127, 19, 236, 0.4);
    --shadow-glass: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
}

/* Base Reset & Vibe */
body {
    background-color: var(--color-bg-dark);
    color: var(--color-text-main);
    font-family: var(--font-display);
    margin: 0;
    min-height: 100vh;
    overflow-x: hidden;
}

.nebula-bg {
    background: var(--gradient-nebula);
    /* Removed fixed positioning that effectively disabled the app container */
    background-size: cover;
    background-position: center;
}

/* Utilities */
.text-gold {
    color: var(--color-gold);
}

.text-muted {
    color: var(--color-text-muted);
}

.text-primary {
    color: var(--color-primary);
}

.glass-panel {
    background: rgba(20, 17, 24, 0.8);
    /* Obsidian/80 */
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.mystic-border {
    position: relative;
    background: #211c27;
    /* Darker inner bg */
    border-radius: var(--radius-lg);
    z-index: 1;
}

.mystic-border::before {
    content: "";
    position: absolute;
    inset: -1px;
    border-radius: var(--radius-lg);
    padding: 2px;
    background: var(--gradient-mystic-border);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
}