/* =====================================================
   CosmicTools — main.css
   Global design tokens, reset, and base typography.
   Loaded on every page before the page-specific CSS.
   ===================================================== */

/* ── Google Font import ─────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap');

/* ── Box-sizing reset ───────────────────────────────── */
*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* ── Design tokens (CSS custom properties) ──────────── */
:root {
    /* Backgrounds */
    --bg-base:        #09090b;
    --bg-card:        rgba(15, 15, 20, 0.75);
    --bg-input:       rgba(255, 255, 255, 0.04);
    --bg-hover:       rgba(255, 255, 255, 0.07);

    /* Text */
    --text-primary:   #e4e4e7;
    --text-heading:   #ffffff;
    --text-muted:     rgba(161, 161, 170, 0.8);
    --text-faint:     rgba(113, 113, 122, 0.6);

    /* Brand / Accent */
    --color-primary:      #7c3aed;
    --color-primary-dark: #6d28d9;
    --color-primary-deep: #5b21b6;
    --color-accent:       #a78bfa;
    --color-accent-light: #c4b5fd;

    /* Status */
    --color-success: #22c55e;
    --color-error:   #ef4444;
    --color-error-text: #fca5a5;
    --color-warning: #eab308;

    /* Borders */
    --border-subtle: rgba(255, 255, 255, 0.07);
    --border-card:   rgba(255, 255, 255, 0.08);
    --border-input:  rgba(255, 255, 255, 0.07);
    --border-focus:  rgba(139, 92, 246, 0.5);

    /* Radius */
    --radius-sm:  8px;
    --radius-md:  12px;
    --radius-lg:  16px;
    --radius-xl:  24px;

    /* Shadows */
    --shadow-card: 0 8px 40px rgba(0, 0, 0, 0.45), 0 0 80px rgba(139, 92, 246, 0.06);
    --shadow-btn:  0 4px 20px rgba(124, 58, 237, 0.35), 0 0 40px rgba(124, 58, 237, 0.1);

    /* Transitions */
    --transition-fast:   0.2s ease;
    --transition-normal: 0.3s ease;
}

/* ── Base HTML & Body ───────────────────────────────── */
html {
    height: 100%;
    font-family: 'Inter', sans-serif;
    background: var(--bg-base);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    color-scheme: dark;
}

body {
    min-height: 100%;
    font-family: 'Inter', sans-serif;
    background: var(--bg-base);
    color: var(--text-primary);
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ── Scrollbar ──────────────────────────────────────── */
::-webkit-scrollbar {
    width: 5px;
}
::-webkit-scrollbar-track {
    background: transparent;
}
::-webkit-scrollbar-thumb {
    background: rgba(139, 92, 246, 0.3);
    border-radius: 10px;
}

/* ── Links ──────────────────────────────────────────── */
a {
    color: var(--color-accent);
    text-decoration: none;
    transition: color var(--transition-fast);
}
a:hover {
    color: var(--color-accent-light);
}