:root {
    /* ===== Professional Light Mode ===== */
    --bg-page: #F5F5F7;
    --bg-page-rgb: 245, 245, 247;
    --bg-card: #FFFFFF;
    --bg-elevated: #FFFFFF;
    --bg-hover: #E8E8ED;
    --bg-active: rgba(0, 122, 255, 0.1);
    --bg-subtle: #F5F5F7;
    --bg-input: #F5F5F7;
    --bg-input-focus: #FFFFFF;
    --bg-tag: #E8E8ED;
    --bg-tag-hover: #DFDFE4;
    --bg-upload: #F5F5F7;
    --bg-upload-hover: rgba(0, 122, 255, 0.06);
    --bg-toolbar: #F5F5F7;
    --bg-view-active: #FFFFFF;
    --bg-overlay-btn: rgba(255, 255, 255, 0.92);
    --bg-action-hover: rgba(0, 122, 255, 0.08);

    --border-default: #D2D2D7;
    --border-hover: #B9B9BE;
    --border-active: #007AFF;
    --border-subtle: #E8E8ED;
    --border-input: #D2D2D7;
    --border-card: #E8E8ED;
    --border-toolbar: #E8E8ED;
    --border-upload: #D2D2D7;
    --border-dashed: #C7C7CC;

    --text-primary: #1D1D1F;
    --text-secondary: #6E6E73;
    --text-tertiary: #86868B;
    --text-muted: #AEAEB2;
    --text-inverse: #FFFFFF;
    --text-placeholder: #86868B;
    --text-hint: #86868B;
    --text-label: #3A3A3C;

    --primary-500: #007AFF;
    --primary-400: #3395FF;
    --primary-600: #0062CC;
    --primary-50: rgba(0, 122, 255, 0.1);
    --primary-100: rgba(0, 122, 255, 0.18);

    --success-500: #34C759;
    --success-50: rgba(52, 199, 89, 0.12);
    --warning-500: #FF9500;
    --warning-50: rgba(255, 149, 0, 0.12);
    --error-500: #FF3B30;
    --error-50: rgba(255, 59, 48, 0.1);

    --shadow-color: rgba(0, 0, 0, 0.05);
    --shadow-primary: rgba(0, 122, 255, 0.25);
    --shadow-focus: rgba(0, 122, 255, 0.12);

    --gradient-ai: linear-gradient(135deg, #5AC8FA 0%, #5E5CE6 45%, #BF5AF2 75%, #FF6482 100%);
    --shadow-glow: 0 8px 24px rgba(94, 92, 230, 0.35);
    --ease-apple: cubic-bezier(0.28, 0.11, 0.32, 1);

    --radius-sm: 8px;
    --radius-md: 10px;
    --radius-lg: 14px;
    --radius-xl: 18px;
    --radius-2xl: 20px;
    --radius-full: 9999px;

    --background: 220 14% 96%;
    --foreground: 220 14% 10%;
    --card: 0 0% 100%;
    --card-foreground: 220 14% 10%;
    --popover: 0 0% 100%;
    --popover-foreground: 220 14% 10%;
    --primary: 211 100% 50%;
    --primary-foreground: 0 0% 100%;
    --secondary: 220 9% 94%;
    --secondary-foreground: 220 14% 10%;
    --muted: 220 9% 94%;
    --muted-foreground: 220 6% 52%;
    --accent: 220 9% 94%;
    --accent-foreground: 220 14% 10%;
    --destructive: 0 84% 60%;
    --destructive-foreground: 0 0% 98%;
    --border: 220 10% 88%;
    --input: 220 10% 88%;
    --ring: 211 100% 50%;
    --radius: 0.75rem;
  }

  [data-theme="dark"] {
    --bg-page: #000000;
    --bg-page-rgb: 0, 0, 0;
    --bg-card: #1C1C1E;
    --bg-elevated: #2C2C2E;
    --bg-hover: #2C2C2E;
    --bg-active: rgba(10, 132, 255, 0.18);
    --bg-subtle: #161617;
    --bg-input: #1C1C1E;
    --bg-input-focus: #2C2C2E;
    --bg-tag: #2C2C2E;
    --bg-tag-hover: #3A3A3C;
    --bg-upload: #1C1C1E;
    --bg-upload-hover: rgba(10, 132, 255, 0.12);
    --bg-toolbar: #161617;
    --bg-view-active: #636366;
    --bg-overlay-btn: rgba(44, 44, 46, 0.92);
    --bg-action-hover: rgba(10, 132, 255, 0.15);

    --border-default: #38383A;
    --border-hover: #48484A;
    --border-active: #0A84FF;
    --border-subtle: #2C2C2E;
    --border-input: #38383A;
    --border-card: #2C2C2E;
    --border-toolbar: #2C2C2E;
    --border-upload: #38383A;
    --border-dashed: #48484A;

    --text-primary: #F5F5F7;
    --text-secondary: #AEAEB2;
    --text-tertiary: #86868B;
    --text-muted: #636366;
    --text-inverse: #1D1D1F;
    --text-placeholder: #86868B;
    --text-hint: #86868B;
    --text-label: #AEAEB2;

    --primary-500: #0A84FF;
    --primary-400: #409CFF;
    --primary-600: #007AFF;
    --primary-50: rgba(10, 132, 255, 0.15);
    --primary-100: rgba(10, 132, 255, 0.25);

    --success-500: #30D158;
    --success-50: rgba(48, 209, 88, 0.15);
    --warning-500: #FF9F0A;
    --warning-50: rgba(255, 159, 10, 0.15);
    --error-500: #FF453A;
    --error-50: rgba(255, 69, 58, 0.15);

    --shadow-color: rgba(0, 0, 0, 0.35);
    --shadow-primary: rgba(10, 132, 255, 0.3);
    --shadow-focus: rgba(10, 132, 255, 0.15);

    --gradient-ai: linear-gradient(135deg, #5AC8FA 0%, #5E5CE6 45%, #BF5AF2 75%, #FF6482 100%);
    --shadow-glow: 0 8px 24px rgba(94, 92, 230, 0.4);
    --ease-apple: cubic-bezier(0.28, 0.11, 0.32, 1);
  }