/* =========================================================
   AI Automation Toolbox V3
   THEME / COLORS / DESIGN TOKENS
   ========================================================= */

:root {
    --aat-bg: #000000;
    --aat-bg-deep: #030303;
    --aat-bg-soft: #070707;
    --aat-bg-panel: #0d0d0d;
    --aat-bg-panel-2: #111111;
    --aat-bg-hover: #17120b;
    --aat-surface-warm: rgba(255, 165, 0, .07);

    --aat-orange: #ffa500;
    --aat-orange-hover: #ffb52e;
    --aat-orange-dark: #c98200;

    --aat-text: #f3f3f3;
    --aat-text-strong: #ffffff;
    --aat-text-muted: #b9b9b9;
    --aat-text-subtle: #7d7d7d;

    --aat-border: #252525;
    --aat-border-soft: #1b1b1b;
    --aat-border-strong: rgba(255, 165, 0, .42);

    --aat-success: #35c759;
    --aat-warning: #ffd60a;
    --aat-danger: #ff453a;
    --aat-info: #64d2ff;

    --aat-radius-xs: 6px;
    --aat-radius-sm: 8px;
    --aat-radius: 12px;
    --aat-radius-lg: 18px;
    --aat-radius-xl: 24px;

    --aat-shadow-sm: 0 8px 24px rgba(0, 0, 0, .22);
    --aat-shadow: 0 18px 50px rgba(0, 0, 0, .34);
    --aat-shadow-lg: 0 30px 90px rgba(0, 0, 0, .48);

    --aat-max-width: 1440px;
    --aat-public-max: 1240px;

    --aat-space-1: 4px;
    --aat-space-2: 8px;
    --aat-space-3: 12px;
    --aat-space-4: 16px;
    --aat-space-5: 24px;
    --aat-space-6: 32px;
    --aat-space-7: 48px;
    --aat-space-8: 64px;
    --aat-space-9: 88px;
}

html {
    background: var(--aat-bg);
    color-scheme: dark;
}

body {
    margin: 0;
    min-height: 100vh;
    overflow-x: hidden;
    background:
        radial-gradient(circle at 75% 0%, rgba(255,165,0,.04), transparent 32rem),
        var(--aat-bg);
    color: var(--aat-text);
}

::selection {
    background: var(--aat-orange);
    color: #000;
}