/* colors.css — Dark theme with purple accent
     Usage: import this file first, then use variables in your main styles.
*/

:root {
    /* --- Core palette --- */
    --bg: #0b0b12;                        /* page background */
    --bg-elev-1: #111126;         /* cards, panels */
    --bg-elev-2: #161638;         /* modals, deeper elevation */

    --text: #e9e7ff;                    /* primary text */
    --text-muted: #b8b4d6;        /* secondary text */
    --text-dim: #8e8aa8;            /* captions, placeholders */

    --border: #242448;                /* subtle borders */
    --border-strong: #35356a; /* stronger borders */

    /* --- Accent (purple) --- */
    --accent: #a855f7;                /* main accent */
    --accent-2: #7c3aed;            /* deeper accent for gradients */
    --accent-soft: rgba(168, 85, 247, 0.18);
    --accent-soft-2: rgba(124, 58, 237, 0.22);

    /* Text on accent surfaces */
    --on-accent: #0b0b12;

    /* --- Links --- */
    --link: #c084fc;
    --link-hover: #d8b4fe;
    --link-visited: #a78bfa;

    /* --- Interactive surfaces --- */
    --surface: var(--bg-elev-1);
    --surface-hover: #151534;
    --surface-active: #1a1a40;

    /* --- Buttons --- */
    --btn-bg: var(--accent);
    --btn-bg-hover: #b56cff;
    --btn-bg-active: #9333ea;
    --btn-text: var(--on-accent);

    --btn-ghost-bg: transparent;
    --btn-ghost-hover: rgba(216, 180, 254, 0.10);
    --btn-ghost-text: var(--text);

    /* --- Focus ring --- */
    --focus-ring: 0 0 0 3px rgba(168, 85, 247, 0.35);

    /* --- Shadows (subtle, dark) --- */
    --shadow-sm: 0 6px 18px rgba(0, 0, 0, 0.35);
    --shadow-md: 0 14px 40px rgba(0, 0, 0, 0.45);

    /* --- Code & syntax-ish --- */
    --code-bg: #0f0f20;
    --code-border: #2b2b57;
    --code-text: #e6e1ff;

    --syntax-keyword: #c084fc;
    --syntax-fn: #60a5fa;
    --syntax-string: #34d399;
    --syntax-number: #f59e0b;
    --syntax-comment: #7c7aa3;

    /* --- Status colors --- */
    --success: #22c55e;
    --warning: #f59e0b;
    --danger: #ef4444;
    --info: #38bdf8;

    --success-soft: rgba(34, 197, 94, 0.16);
    --warning-soft: rgba(245, 158, 11, 0.16);
    --danger-soft: rgba(239, 68, 68, 0.16);
    --info-soft: rgba(56, 189, 248, 0.14);

    /* --- Selection --- */
    --selection-bg: rgba(168, 85, 247, 0.35);
    --selection-text: var(--text);

    /* --- Gradients (optional) --- */
    --gradient-accent: linear-gradient(135deg, #7c3aed 0%, #a855f7 45%, #c084fc 100%);
    --gradient-surface: linear-gradient(180deg, rgba(168,85,247,0.08), rgba(0,0,0,0));
}

/* Optional: if you want automatic form controls on dark */
/* :root {
    color-scheme: dark;
} */

/* Optional helpers */
::selection {
    background: var(--selection-bg);
    color: var(--selection-text);
}

/* Example defaults you can keep or delete */
a {
    color: var(--link);
    text-decoration-color: rgba(192, 132, 252, 0.55);
}
a:hover {
    color: var(--link-hover);
    text-decoration-color: rgba(216, 180, 254, 0.85);
}
a:visited {
    color: var(--link-visited);
}

:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring);
    border-radius: 8px;
}