@import url("https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=Noto+Sans+SC:wght@400;500;700;800&display=swap");

/******************************************************************************
 * @file    adu-core.css
 * @brief   Adu Network Studio — 统一设计系统核心（CSS变量 + Base样式）
 *
 * @details 本文件是 Adu Design System 的底层基础，合并自：
 *          - theme.css (CSS变量体系 + 排版 + 基础重置)
 *          - apple-glass.css (玻璃拟态变量)
 *          - assets/index/style.css (首页布局变量)
 *
 *          所有颜色、间距、阴影均通过 CSS 变量定义，
 *          支持 data-theme="light|dark" 双主题无缝切换。
 *
 * @design   Zinc 中性灰 + Blue 专业蓝 配色体系
 * @ref      Linear App / GitHub Primer / Tailwind CSS / shadcn/ui
 * @version  1.0.0
 ******************************************************************************/

/* ============================================================
   CSS Variables — Theme System
   ============================================================ */

:root {
    /* Transition */
    --theme-transition: 0.2s ease;
    --font-sans: "Plus Jakarta Sans", "Noto Sans SC", "Segoe UI", sans-serif;
    --font-display: "Plus Jakarta Sans", "Noto Sans SC", "Segoe UI", sans-serif;
    --font-mono: "JetBrains Mono", "Cascadia Code", "Fira Code", ui-monospace, monospace;

    /* Brand */
    --brand-primary: var(--accent-primary);
    --brand-gradient: linear-gradient(135deg, #2563eb 0%, #3b82f6 50%, #60a5fa 100%);
    --brand-gradient-subtle: linear-gradient(135deg, #1e40af 0%, #2563eb 100%);

    /* Animation Easing */
    --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-out-back: cubic-bezier(0.34, 1.56, 0.64, 1);
    --ease-spring: cubic-bezier(0.22, 1.2, 0.36, 1);

    /* Glass Morphism Variables */
    --glass-bg: rgba(255, 255, 255, 0.72);
    --glass-border: rgba(255, 255, 255, 0.45);
    --glass-shadow: 0 8px 32px rgba(15, 23, 42, 0.08);
    --glass-blur: blur(20px);
    --glass-blur-heavy: blur(28px);

    /* Homepage Layout Tokens */
    --home-shell-width: 1240px;
    --home-radius-lg: 28px;
    --home-radius-md: 20px;
    --home-radius-sm: 14px;
    --home-shadow-soft: 0 24px 60px rgba(15, 23, 42, 0.12);
    --home-shadow-card: 0 18px 40px rgba(15, 23, 42, 0.08);
    --home-border-glass: rgba(255, 255, 255, 0.34);
    --home-grid-line: rgba(148, 163, 184, 0.15);

    /* Scroll UI */
    --scroll-progress-height: 3px;
    --back-to-top-size: 48px;

    /* Radius System */
    --radius-xs: 4px;
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 20px;
    --radius-2xl: 28px;
    --radius-full: 9999px;
}

/* ============================================================
   Light Theme (Default)
   ============================================================ */
:root,
[data-theme="light"] {
    /* Background Layers */
    --bg-base: #ffffff;
    --bg-subtle: #fafafa;
    --bg-muted: #f4f4f5;
    --bg-emphasis: #e4e4e7;

    /* Surface Colors */
    --bg-surface0: #ffffff;
    --bg-surface1: #fafafa;
    --bg-surface2: #f4f4f5;
    --bg-mantle: #fafafa;
    --bg-crust: #f4f4f5;

    /* Text Colors */
    --text-primary: #18181b;
    --text-secondary: #3f3f46;
    --text-tertiary: #52525b;
    --text-muted: #71717a;
    --text-subtle: #a1a1aa;
    --text-inverse: #fafafa;

    /* Accent — Professional Blue */
    --accent-primary: #2563eb;
    --accent-primary-rgb: 37, 99, 235;
    --accent-hover: #1d4ed8;
    --accent-active: #1e40af;
    --accent-muted: #dbeafe;
    --accent-subtle: #eff6ff;

    /* Semantic Colors */
    --accent-success: #16a34a;
    --accent-success-hover: #15803d;
    --accent-warning: #ca8a04;
    --accent-error: #dc2626;
    --accent-info: #0284c7;
    --accent-purple: #9333ea;

    /* UI Layers */
    --overlay0: #d4d4d8;
    --overlay1: #a1a1aa;
    --overlay2: #71717a;

    /* Borders */
    --border-default: #e4e4e7;
    --border-muted: #f4f4f5;
    --border-strong: #d4d4d8;
    --border-accent: var(--accent-primary);

    /* Shadows */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.06), 0 2px 4px -1px rgba(0, 0, 0, 0.04);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.08), 0 4px 6px -2px rgba(0, 0, 0, 0.04);
    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    --shadow-glow: 0 0 20px rgba(37, 99, 235, 0.15);

    /* Card */
    --card-bg: #ffffff;
    --card-border: #e4e4e7;
    --card-shadow: var(--shadow-md);
    --card-hover-shadow: var(--shadow-lg);

    /* Input */
    --input-bg: #ffffff;
    --input-border: #d4d4d8;
    --input-focus-border: var(--accent-primary);
    --input-placeholder: #a1a1aa;

    /* Button */
    --btn-primary-bg: var(--accent-primary);
    --btn-primary-hover: var(--accent-hover);
    --btn-primary-text: #ffffff;
    --btn-secondary-bg: #f4f4f5;
    --btn-secondary-hover: #e4e4e7;
    --btn-secondary-text: #3f3f46;

    /* Navbar */
    --navbar-bg: #ffffff;
    --navbar-border: #e4e4e7;
    --navbar-text: #18181b;
    --navbar-text-muted: #71717a;

    /* Hero */
    --hero-bg: linear-gradient(180deg, #fafafa 0%, #ffffff 100%);
    --hero-accent-bg: var(--brand-gradient);

    /* Footer — Dark on light theme */
    --footer-bg: #18181b;
    --footer-text: #f4f4f5;
    --footer-text-muted: #a1a1aa;
}

/* ============================================================
   Dark Theme
   ============================================================ */
[data-theme="dark"] {
    /* Background Layers */
    --bg-base: #09090b;
    --bg-subtle: #18181b;
    --bg-muted: #27272a;
    --bg-emphasis: #3f3f46;

    /* Surface Colors */
    --bg-surface0: #18181b;
    --bg-surface1: #27272a;
    --bg-surface2: #3f3f46;
    --bg-mantle: #09090b;
    --bg-crust: #09090b;

    /* Text Colors */
    --text-primary: #fafafa;
    --text-secondary: #e4e4e7;
    --text-tertiary: #d4d4d8;
    --text-muted: #a1a1aa;
    --text-subtle: #71717a;
    --text-inverse: #18181b;

    /* Accent — Brighter Blue */
    --accent-primary: #3b82f6;
    --accent-primary-rgb: 59, 130, 246;
    --accent-hover: #60a5fa;
    --accent-active: #2563eb;
    --accent-muted: #1e3a8a;
    --accent-subtle: #172554;

    /* Semantic Colors */
    --accent-success: #22c55e;
    --accent-success-hover: #16a34a;
    --accent-warning: #eab308;
    --accent-error: #ef4444;
    --accent-info: #0ea5e9;
    --accent-purple: #a855f7;

    /* UI Layers */
    --overlay0: #52525b;
    --overlay1: #71717a;
    --overlay2: #a1a1aa;

    /* Borders */
    --border-default: #27272a;
    --border-muted: #18181b;
    --border-strong: #3f3f46;
    --border-accent: var(--accent-primary);

    /* Shadows */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -1px rgba(0, 0, 0, 0.3);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.5), 0 4px 6px -2px rgba(0, 0, 0, 0.4);
    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.6), 0 10px 10px -5px rgba(0, 0, 0, 0.4);
    --shadow-glow: 0 0 30px rgba(59, 130, 246, 0.2);

    /* Card */
    --card-bg: #18181b;
    --card-border: #27272a;
    --card-shadow: var(--shadow-md);
    --card-hover-shadow: var(--shadow-glow);

    /* Input */
    --input-bg: #18181b;
    --input-border: #3f3f46;
    --input-focus-border: var(--accent-primary);
    --input-placeholder: #71717a;

    /* Button */
    --btn-primary-bg: var(--accent-primary);
    --btn-primary-hover: var(--accent-hover);
    --btn-primary-text: #ffffff;
    --btn-secondary-bg: #27272a;
    --btn-secondary-hover: #3f3f46;
    --btn-secondary-text: #e4e4e7;

    /* Navbar */
    --navbar-bg: #09090b;
    --navbar-border: #27272a;
    --navbar-text: #fafafa;
    --navbar-text-muted: #a1a1aa;

    /* Hero */
    --hero-bg: linear-gradient(180deg, #09090b 0%, #18181b 100%);
    --hero-accent-bg: var(--brand-gradient);

    /* Footer */
    --footer-bg: #09090b;
    --footer-text: #d4d4d8;
    --footer-text-muted: #71717a;

    /* Glass Override */
    --glass-bg: rgba(24, 24, 27, 0.78);
    --glass-border: rgba(63, 63, 70, 0.55);
    --glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.24);
}

/* ============================================================
   Spacing Scale · 8pt（新增 · 补 spec 4.5 缺口）
   ============================================================ */
:root {
    --space-xs: 4px;
    --space-sm: 8px;
    --space-md: 12px;
    --space-lg: 16px;
    --space-xl: 24px;
    --space-2xl: 32px;
    --space-3xl: 48px;
    --space-4xl: 64px;
}

/* ============================================================
   Type Scale（新增 · 补 spec 4.4 缺口）
   ============================================================ */
:root {
    --text-xs: 12px;
    --text-sm: 14px;
    --text-base: 16px;
    --text-lg: 18px;
    --text-xl: 20px;
    --text-2xl: 24px;
    --text-3xl: 30px;
    --text-4xl: 36px;
    --text-5xl: 48px;
    --leading-normal: 1.5;
    --leading-relaxed: 1.7;
}