@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
    :root {
        --bg-main: #ffffff;
        --bg-surface: #f8fafc;
        --bg-elevated: #f1f5f9;
        --text-main: #0f172a;
        --text-muted: #64748b;
        --border: rgba(0, 0, 0, 0.08);
        --accent: #06b6d4;
        --accent-dim: rgba(6, 182, 212, 0.1);
        --glass: rgba(255, 255, 255, 0.7);
        --grid-color: rgba(6, 182, 212, 0.05);
    }

    .dark {
        --bg-main: #050505;
        --bg-surface: #0a0a0a;
        --bg-elevated: #111111;
        --text-main: #f1f5f9;
        --text-muted: #94a3b8;
        --border: rgba(255, 255, 255, 0.05);
        --accent: #22d3ee;
        --accent-dim: rgba(34, 211, 238, 0.1);
        --glass: rgba(0, 0, 0, 0.4);
        --grid-color: rgba(34, 211, 238, 0.05);
    }

    body {
        background-color: var(--bg-main);
        color: var(--text-main);
        transition: background-color 0.3s ease, color 0.3s ease;
        -webkit-font-smoothing: antialiased;
    }

    /* Standardized Theme Colors for Components */
    .theme-bg-main { background-color: var(--bg-main); }
    .theme-bg-surface { background-color: var(--bg-surface); }
    .theme-bg-elevated { background-color: var(--bg-elevated); }
    .theme-text-main { color: var(--text-main); }
    .theme-text-muted { color: var(--text-muted); }
    .theme-border { border-color: var(--border); }

    /* Minimalist Technical Scrollbar */
    ::-webkit-scrollbar {
        width: 5px;
        height: 5px;
    }

    ::-webkit-scrollbar-track {
        background: var(--bg-main);
    }

    ::-webkit-scrollbar-thumb {
        background: #888;
        border-radius: 10px;
    }

    .dark ::-webkit-scrollbar-thumb {
        background: #333;
    }

    /* Global Radius Constraint Protocol */
    :root {
        --max-radius: 10px;
    }

    /* 
       Apply 10px cap to all potentially large radius elements 
       that are NOT inside a sidebar/aside container.
    */
    :not(aside):not(.sidebar):not([role="complementary"]) .rounded-xl,
    :not(aside):not(.sidebar):not([role="complementary"]) .rounded-2xl,
    :not(aside):not(.sidebar):not([role="complementary"]) .rounded-3xl,
    :not(aside):not(.sidebar):not([role="complementary"]) .rounded-full,
    :not(aside):not(.sidebar):not([role="complementary"]) .rounded-\[2rem\],
    :not(aside):not(.sidebar):not([role="complementary"]) .rounded-\[2\.5rem\],
    :not(aside):not(.sidebar):not([role="complementary"]) .rounded-\[3rem\],
    :not(aside):not(.sidebar):not([role="complementary"]) button,
    :not(aside):not(.sidebar):not([role="complementary"]) input,
    :not(aside):not(.sidebar):not([role="complementary"]) section,
    :not(aside):not(.sidebar):not([role="complementary"]) .card,
    :not(aside):not(.sidebar):not([role="complementary"]) [class*="rounded-"] {
        border-radius: var(--max-radius) !important;
    }

    /* Ensure buttons aren't forced to 10px if they are smaller (like small icons) */
    .rounded-sm { border-radius: 0.125rem !important; }
    .rounded { border-radius: 0.25rem !important; }
    .rounded-md { border-radius: 0.375rem !important; }
    .rounded-lg { border-radius: 0.5rem !important; }
}

@layer components {
    .glass-panel {
        @apply border border-[var(--border)] backdrop-blur-md;
        background-color: var(--glass);
    }
    
    .btn-primary {
        @apply px-6 py-2 bg-cyan-500 text-white font-bold uppercase text-[10px] tracking-widest rounded hover:bg-cyan-400 transition-all active:scale-95 shadow-lg shadow-cyan-500/20;
    }

    .dark .btn-primary {
        @apply text-black bg-cyan-400 hover:bg-white;
    }

    .btn-secondary {
        @apply px-6 py-2 bg-[var(--bg-elevated)] border border-[var(--border)] text-[var(--text-main)] font-bold uppercase text-[10px] tracking-widest rounded hover:bg-opacity-80 transition-all active:scale-95;
    }
}