/*
 * AI Automation Toolbox design tokens.
 * This is the source of truth for colors, surfaces, borders, radii, spacing,
 * shadows, and compatibility aliases used by older page CSS.
 */

:root {
    color-scheme: dark;

    --aat-orange: #ffa500;
    --aat-orange-hover: #e69500;
    --aat-orange-active: #cc8400;
    --aat-button-bg: #ffa500;
    --aat-button-bg-hover: #e69500;
    --aat-button-text: #111111;

    --aat-bg: #222222;
    --aat-bg-deep: #171717;
    --aat-bg-elevated: #272727;
    --aat-surface: #2a2a2a;
    --aat-surface-2: #303030;
    --aat-surface-3: #383838;
    --aat-surface-warm: #332a1e;

    --aat-border: #414141;
    --aat-border-soft: #353535;
    --aat-border-strong: #515151;
    --aat-border-orange: rgba(255, 165, 0, .45);

    --aat-text: #f5f5f5;
    --aat-text-strong: #ffffff;
    --aat-text-muted: #a8a8a8;
    --aat-text-subtle: #737373;

    --aat-success: #39b86b;
    --aat-success-bg: #102117;
    --aat-success-border: #265f3b;
    --aat-warning: #ffcc5b;
    --aat-warning-bg: #21170e;
    --aat-warning-border: #69441e;
    --aat-danger: #e04b4b;
    --aat-danger-bg: #281313;
    --aat-danger-border: #673131;
    --aat-info: #6db2ff;
    --aat-info-bg: #102033;
    --aat-info-border: #264d73;

    --aat-radius-xs: 6px;
    --aat-radius-sm: 8px;
    --aat-radius-md: 10px;
    --aat-radius-lg: 13px;
    --aat-radius-xl: 16px;
    --aat-radius-pill: 999px;

    --aat-space-xs: 4px;
    --aat-space-sm: 8px;
    --aat-space-md: 12px;
    --aat-space-lg: 16px;
    --aat-space-xl: 24px;
    --aat-space-1: 4px;
    --aat-space-2: 8px;
    --aat-space-3: 12px;
    --aat-space-4: 16px;
    --aat-space-5: 20px;
    --aat-space-6: 24px;
    --aat-space-7: 32px;
    --aat-space-8: 40px;

    --aat-page-max: 1480px;
    --aat-app-max: 1180px;
    --aat-public-max: 1160px;
    --aat-page-gutter: 40px;
    --aat-page-gutter-tablet: 24px;
    --aat-page-gutter-mobile: 16px;

    --aat-shadow-card: 0 18px 60px rgba(0, 0, 0, .34);
    --aat-shadow-popover: 0 18px 45px rgba(0, 0, 0, .65);
    --aat-focus-ring: 0 0 0 3px rgba(255, 165, 0, .24);

    /* Shared component compatibility tokens. */
    --aat-bg-panel: #0d0d0d;
    --aat-input-bg: #0d0d0d;
    --aat-shadow-sm: 0 8px 22px rgba(0, 0, 0, .24);

    /* Shared navigation: dark-gray beveled buttons with orange active state. */
    --aat-nav-bg: #252525;
    --aat-nav-border: #3b3b3b;
    --aat-nav-button-top: #555555;
    --aat-nav-button-mid: #494949;
    --aat-nav-button-bottom: #3a3a3a;
    --aat-nav-button-hover-top: #606060;
    --aat-nav-button-hover-bottom: #424242;
    --aat-nav-button-border: #666666;
    --aat-nav-button-text: #f7f7f7;
    --aat-nav-button-shadow: inset 0 1px 0 rgba(255,255,255,.24), inset 1px 0 0 rgba(255,255,255,.08), inset -1px 0 0 rgba(0,0,0,.24), inset 0 -1px 0 rgba(0,0,0,.62), 0 3px 6px rgba(0,0,0,.38);
    --aat-nav-active-top: #ffb52e;
    --aat-nav-active-mid: #ffa500;
    --aat-nav-active-bottom: #db8e00;
    --aat-nav-active-border: #ffbe4d;
    --aat-nav-active-text: #000000;
    --aat-nav-active-shadow: inset 0 1px 0 rgba(255,255,255,.45), inset 0 -2px 0 rgba(95,58,0,.35), 0 2px 5px rgba(0,0,0,.42);

    /* Compatibility aliases used by existing page-level CSS. */
    --bg: var(--aat-bg);
    --black: var(--aat-bg-deep);
    --surface: var(--aat-surface);
    --surface-2: var(--aat-surface-2);
    --surface-3: var(--aat-surface-3);
    --panel: var(--aat-surface);
    --panel-2: var(--aat-surface-2);
    --line: var(--aat-border);
    --line-soft: var(--aat-border-soft);
    --text: var(--aat-text);
    --muted: var(--aat-text-muted);
    --muted-2: var(--aat-text-subtle);
    --orange: var(--aat-orange);
    --orange-hover: var(--aat-orange-hover);
    --accent: var(--aat-orange);
    --red: var(--aat-danger);
    --green: var(--aat-success);
    --shadow: var(--aat-shadow-card);
}

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

body {
    background: var(--aat-bg);
    color: var(--aat-text);
}

a {
    color: inherit;
}

::selection {
    background: rgba(255, 165, 0, .32);
    color: var(--aat-text-strong);
}