/* ===================================================================
   ADG 3D Engine — Apple Dark Mode Design System
   Inspired by Apple Human Interface Guidelines (Dark)
   =================================================================== */

:root {
    /* ── Background Layers (Apple Dark 4-tier) ── */
    --bg-app: #000000;
    --bg-primary: #0a0a0a;
    --bg-secondary: #141416;
    --bg-tertiary: #1c1c1e;
    --bg-elevated: #2c2c2e;
    --bg-grouped: #1c1c1e;

    /* ── Accent ── */
    --accent: #0A84FF;
    /* iOS System Blue */
    --accent-hover: #409CFF;
    --accent-dim: rgba(10, 132, 255, 0.15);
    --accent-glow: 0 0 0 4px rgba(10, 132, 255, 0.12);

    /* ── Semantic Colors ── */
    --color-success: #30D158;
    --color-warning: #FF9F0A;
    --color-danger: #FF453A;
    --color-purple: #BF5AF2;
    --color-teal: #64D2FF;
    --color-orange: #FF9F0A;

    /* ── Text (Apple Label Colors) ── */
    --text-primary: #FFFFFF;
    --text-secondary: rgba(235, 235, 245, 0.6);
    --text-tertiary: rgba(235, 235, 245, 0.3);
    --text-quaternary: rgba(235, 235, 245, 0.18);

    /* ── Separators ── */
    --separator: rgba(84, 84, 88, 0.65);
    --separator-light: rgba(84, 84, 88, 0.35);

    /* ── Fill (Apple System Fill Colors) ── */
    --fill-primary: rgba(120, 120, 128, 0.36);
    --fill-secondary: rgba(120, 120, 128, 0.32);
    --fill-tertiary: rgba(120, 120, 128, 0.24);
    --fill-quaternary: rgba(120, 120, 128, 0.18);

    /* ── Glassmorphism ── */
    --glass-bg: rgba(28, 28, 30, 0.72);
    --glass-bg-thick: rgba(28, 28, 30, 0.88);
    --glass-blur: blur(20px) saturate(180%);
    --glass-blur-heavy: blur(40px) saturate(200%);
    --glass-border: 1px solid rgba(255, 255, 255, 0.08);
    --glass-shadow: 0 2px 8px rgba(0, 0, 0, 0.3), 0 12px 48px rgba(0, 0, 0, 0.4);

    --glass-header-bg: rgba(0, 0, 0, 0.72);
    --glass-header-blur: blur(20px) saturate(180%);

    /* ── UI Measurements ── */
    --header-height: 52px;
    --sidebar-width: 280px;
    --toolbar-width: 52px;
    --statusbar-height: 24px;

    /* ── Border Radius (3-tier) ── */
    --radius-lg: 16px;
    /* panels, modals */
    --radius-md: 10px;
    /* buttons, tabs */
    --radius-sm: 6px;
    /* inputs, badges */
    --radius-full: 9999px;
    /* pills */

    /* ── Typography ── */
    --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Segoe UI', Roboto, sans-serif;
    --font-mono: 'SF Mono', 'JetBrains Mono', 'Fira Code', monospace;

    --text-title: 600 20px/1.3 var(--font-sans);
    --text-headline: 600 15px/1.4 var(--font-sans);
    --text-body: 400 13px/1.5 var(--font-sans);
    --text-caption: 400 11px/1.4 var(--font-sans);
    --text-overline: 600 10px/1.2 var(--font-sans);

    /* ── Transitions (Apple Spring Curves) ── */
    --ease-default: cubic-bezier(0.25, 0.1, 0.25, 1);
    /* standard */
    --ease-spring: cubic-bezier(0.22, 1, 0.36, 1);
    /* overshoot */
    --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
    /* playful */
    --ease-out: cubic-bezier(0, 0, 0.58, 1);
    /* decelerate */

    --duration-fast: 0.15s;
    --duration-normal: 0.25s;
    --duration-slow: 0.4s;
    --duration-enter: 0.35s;
    --duration-exit: 0.2s;

    /* ── Z-Index Scale ── */
    --z-toolbar: 100;
    --z-sidebar: 200;
    --z-header: 300;
    --z-overlay: 400;
    --z-modal: 500;
    --z-toast: 600;

    /* Legacy compat (gradually migrate away) */
    --color-accent: var(--accent);
    --color-accent-dim: var(--accent-dim);
    --color-accent-glow: var(--accent-glow);
    --color-text-main: var(--text-primary);
    --color-text-dim: var(--text-secondary);
    --color-text-bright: var(--text-primary);
    --color-border: var(--separator-light);
    --color-border-hover: var(--separator);
    --border-radius: var(--radius-md);
    --bg-panel: var(--bg-secondary);
    --bg-header: var(--bg-primary);
    --transition-fast: var(--duration-fast) var(--ease-default);
    --transition-mid: var(--duration-normal) var(--ease-spring);
    --transition-slow: var(--duration-slow) var(--ease-spring);
    --color-accent-secondary: var(--color-purple);
    --primary: var(--accent);
}

/* ── Global Reset & Base ── */
*,
*::before,
*::after {
    box-sizing: border-box;
}

body {
    background-color: var(--bg-app);
    color: var(--text-primary);
    font: var(--text-body);
    font-family: var(--font-sans);
    overflow: hidden;
    margin: 0;
    padding: 0;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ── Selection ── */
::selection {
    background: rgba(10, 132, 255, 0.3);
    color: var(--text-primary);
}

/* ── Scrollbar (Thin, Apple-like) ── */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.12);
    border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.2);
}