/* ============================================================
   DeepVideo Manual — Design Tokens
   Extracted from web/static/css/app.css
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@400;500&display=swap');

/* === Reset === */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    font-family: "Outfit", "Microsoft YaHei", "PingFang SC", "Noto Sans CJK SC", "Segoe UI", "SF Pro Display", Roboto, sans-serif;
    line-height: 1.6;
    color: var(--gray-800);
}

/* === Default Theme (:root) === */
:root {
    --brand-50: #eef2ff;
    --brand-100: #dbeafe;
    --brand-200: #bfdbfe;
    --brand-300: #93c5fd;
    --brand-400: #60a5fa;
    --brand: #2562E9;
    --brand-hover: #1d4ed8;
    --brand-pressed: #1e40af;
    --brand-800: #1e3a8a;
    --brand-900: #172554;
    --brand-gradient: linear-gradient(135deg, var(--brand) 0%, var(--brand-hover) 50%, var(--brand-pressed) 100%);
    --brand-light: var(--brand-50);
    --brand-subtle: var(--brand-100);
    --brand-glow: 0 0 20px rgba(37, 98, 233, 0.3);
    --brand-glow-lg: 0 0 32px rgba(37, 98, 233, 0.4);

    --gray-50: #f9fafb;
    --gray-100: #f3f4f6;
    --gray-200: #e5e7eb;
    --gray-300: #d1d5db;
    --gray-400: #9ca3af;
    --gray-500: #6b7280;
    --gray-600: #4b5563;
    --gray-700: #374151;
    --gray-800: #1f2937;
    --gray-900: #111827;

    --success: #16a34a;
    --success-bg: #dcfce7;
    --warning: #d97706;
    --warning-bg: #fef3c7;
    --error: #dc2626;
    --error-bg: #fee2e2;
    --info: #2562E9;
    --info-bg: #eff6ff;

    --white: #ffffff;
    --radius-xs: 4px;
    --radius-sm: 6px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 16px;
    --radius-full: 9999px;

    --shadow-sm: 0 1px 3px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.06);
    --shadow-md: 0 4px 16px rgba(0,0,0,0.1), 0 2px 6px rgba(0,0,0,0.06);
    --shadow-lg: 0 12px 32px rgba(0,0,0,0.14), 0 4px 12px rgba(0,0,0,0.08);

    --font: "Outfit", "Microsoft YaHei", "PingFang SC", sans-serif;
    --font-display: "Outfit", "Microsoft YaHei", "PingFang SC", sans-serif;
    --mono: "JetBrains Mono", "Fira Code", "Cascadia Code", monospace;

    --font-h1: 26px;
    --font-h2: 22px;
    --font-h3: 18px;
    --font-h4: 16px;
    --font-body: 14px;
    --font-small: 12px;

    --space-xs: 4px;
    --space-sm: 8px;
    --space-md: 12px;
    --space-lg: 16px;
    --space-xl: 20px;
    --space-2xl: 24px;

    /* Manual-specific additions */
    --bg-primary: var(--gray-50);
    --bg-secondary: var(--white);
    --text-primary: var(--gray-800);
    --text-secondary: var(--gray-600);
    --text-muted: var(--gray-400);
    --border-primary: var(--gray-200);
}

/* === Theme: Dark === */
[data-theme="dark"] {
    --brand: #2562E9;
    --brand-hover: #1a50d4;
    --brand-pressed: #0f3ebf;
    --brand-800: #0a2e99;
    --brand-light: rgba(37, 98, 233, 0.1);
    --brand-subtle: rgba(37, 98, 233, 0.06);
    --success: #34d399;
    --success-bg: rgba(52, 211, 153, 0.12);
    --warning: #fbbf24;
    --warning-bg: rgba(251, 191, 36, 0.12);
    --error: #f87171;
    --error-bg: rgba(248, 113, 113, 0.12);
    --info: #2562E9;
    --info-bg: rgba(37, 98, 233, 0.1);
    --gray-50: #1a1a1a;
    --gray-100: #222222;
    --gray-200: #2e2e2e;
    --gray-300: #3e3e3e;
    --gray-400: #5e5e5e;
    --gray-500: #7e7e7e;
    --gray-600: #9e9e9e;
    --gray-700: #bebebe;
    --gray-800: #dedede;
    --gray-900: #eeeeee;
    --white: #1a1a1a;
    --bg-primary: #121212;
    --bg-secondary: #1a1a1a;
    --text-primary: #e8e8e8;
    --text-secondary: #9e9e9e;
    --text-muted: #5e5e5e;
    --border-primary: #2e2e2e;
}