/* dontpoke.me Design System 1.0 — Design tokens (px, hex, system fonts) */
:root {
    /* Background */
    --color-bg-primary: #1a1a1a;
    --color-bg-secondary: #0f0f0f;
    --color-bg-card: #252525;
    --color-bg-darker: #0a0a0a;
    --color-bg-hover: #2a2a2a;

    /* Border */
    --color-border: #333333;
    --color-border-light: #444444;
    --color-border-focus: #4A90E2;

    /* Text */
    --color-text-primary: #ffffff;
    --color-text-secondary: #a0a0a0;
    --color-text-muted: #666666;
    --color-text-inverse: #000000;

    /* Accent */
    --color-primary: #4A90E2;
    --color-primary-dark: #3A7BC8;
    --color-primary-light: #5AA0F2;

    /* Status */
    --color-success: #4CAF50;
    --color-warning: #FFA726;
    --color-error: #EF5350;
    --color-info: #29B6F6;

    /* Plan tiers */
    --color-plan-free: #666666;
    --color-plan-pro: #4A90E2;
    --color-plan-business: #9333EA;
    --color-plan-enterprise: #FFD700;

    /* Typography — system fonts only */
    --font-ui: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Liberation Sans', 'Helvetica Neue', Arial, sans-serif;
    --font-mono: Monaco, Menlo, Consolas, 'Courier New', monospace;

    --font-h1: 32px;
    --font-h2: 24px;
    --font-h3: 20px;
    --font-h4: 18px;
    --font-body: 14px;
    --font-body-medium: 14px;
    --font-small: 12px;
    --font-data: 14px;
    --font-data-small: 12px;
    --font-badge: 11px;
    --font-button: 14px;

    /* Spacing (base-4) */
    --space-xs: 4px;
    --space-sm: 8px;
    --space-md: 16px;
    --space-lg: 24px;
    --space-xl: 32px;
    --space-2xl: 48px;
    --space-3xl: 64px;

    /* Border radius */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;

    /* Shadows (sparingly) */
    --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.5);
    --shadow-md: 0 4px 8px rgba(0, 0, 0, 0.5);
    --shadow-primary: 0 4px 8px rgba(74, 144, 226, 0.25);

    /* Glassmorphism (futuristic glass style — brand blue only) */
    --bg-body-gradient: radial-gradient(ellipse 120% 100% at 50% 0%, #1a1a1a 0%, #0d0d0d 45%, #000000 100%);
    --glass-bg: rgba(30, 30, 35, 0.65);
    --glass-bg-input: rgba(10, 10, 15, 0.5);
    --glass-border: 1px solid rgba(255, 255, 255, 0.08);
    --glass-border-top: rgba(74, 144, 226, 0.25);
    --glass-blur: blur(25px);
    --glass-saturate: saturate(110%);
    --glass-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(74, 144, 226, 0.08) inset;
    --glass-glow-blue: 0 4px 20px rgba(74, 144, 226, 0.35);
    --radius-glass: 20px;
    --radius-pill: 9999px;

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

    /* Z-index */
    --z-base: 0;
    --z-dropdown: 100;
    --z-sticky: 200;
    --z-modal-backdrop: 900;
    --z-modal: 1000;
    --z-toast: 1100;

    /* Layout */
    --width-content: 1440px;
    --width-sidebar: 260px;
    --width-sidebar-collapsed: 64px;
    --sidebar-floating-offset: 16px;
    --sidebar-total-left: calc(var(--sidebar-floating-offset) + var(--width-sidebar) + var(--sidebar-floating-offset));
    --sidebar-total-left-collapsed: calc(var(--sidebar-floating-offset) + var(--width-sidebar-collapsed) + var(--sidebar-floating-offset));
    --breakpoint-mobile: 768px;
    --breakpoint-tablet: 1024px;
    --breakpoint-desktop: 1440px;

    /* Legacy aliases (existing components) — map to design system */
    --bg: var(--color-bg-primary);
    --surface: var(--color-bg-card);
    --surface-2: var(--color-bg-secondary);
    --border: var(--color-border);
    --border-2: var(--color-border-light);
    --accent: var(--color-primary);
    --accent-h: var(--color-primary-dark);
    --accent-dim: rgba(74, 144, 226, 0.12);
    --text: var(--color-text-primary);
    --text-2: var(--color-text-secondary);
    --muted: var(--color-text-secondary);
    --subtle: var(--color-text-muted);
    --danger: var(--color-error);
    --success: var(--color-success);
    --warn: var(--color-warning);
    --font: var(--font-ui);
    --mono: var(--font-mono);
    --sidebar-w: var(--width-sidebar);
    --sidebar-w-collapsed: var(--width-sidebar-collapsed);
    --bottom-nav-h: 60px;
}

/* -----------------------------------------------------------------------------
   Aiko UI Implementation Guide 1.0 — Design tokens (Dashboard & Domain Intel)
   Single source of truth for colors, typography, spacing, components.
   ----------------------------------------------------------------------------- */
:root {
    /* Backgrounds */
    --bg-app: #0a0a0a;
    --bg-surface: #1f1f1f;
    --bg-surface-hover: #2a2a2a;
    --bg-input: #141414;
    --bg-overlay: rgba(0, 0, 0, 0.7);

    /* Borders (v1.2: --border-subtle #2a2a2a for softer divisions) */
    --border-subtle: #2a2a2a;
    --border-focus: #3b82f6;

    /* Typography */
    --text-primary: #ffffff;
    --text-secondary: #a3a3a3;
    --text-muted: #737373;
    --text-on-accent: #ffffff;
    --text-inverse: #000000;

    /* Accents & Status */
    --accent-primary: #3b82f6;
    --accent-hover: #2563eb;
    --success: #22c55e;
    --warning: #f59e0b;
    --danger: #ef4444;
    --info: #3b82f6;
    /* Phase 1 UX: status banner backgrounds */
    --danger-bg-subtle: rgba(239, 68, 68, 0.12);
    --success-bg-subtle: rgba(34, 197, 94, 0.12);
    --warning-bg-subtle: rgba(245, 158, 11, 0.12);
    --info-bg-subtle: rgba(59, 130, 246, 0.12);

    /* Tier badges */
    --tier-free-bg: #737373;
    --tier-pro-bg: #3b82f6;
    --tier-biz-bg: #a855f7;

    /* Fonts - system stack for speed; monospace for data */
    --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;

    /* Spacing (base 4px grid) — v1.2 aliases: --spacing-xs etc. */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-6: 24px;
    --space-8: 32px;
    --space-12: 48px;
    --spacing-xs: 8px;
    --spacing-sm: 12px;
    --spacing-md: 16px;
    --spacing-lg: 24px;
    --spacing-xl: 32px;

    /* Border radius (v1.2: radius-sm 6px for badges/small inputs) */
    --radius-sm: 6px;
    --radius-md: 8px;
    --radius-lg: 12px;

    /* Shadows */
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.5);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.5), 0 2px 4px -1px rgba(0, 0, 0, 0.5);
}