/* ==========================================
   CloudDrive Design Tokens (tokens.css)
   Notion / Figma-inspired aesthetic
   Clean, minimal, spacious
   ========================================== */

:root {
  color-scheme: dark;

  /* Typography */
  --cd-font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif;
  --cd-font-mono: "JetBrains Mono", "Fira Code", "SF Mono", Menlo, Consolas, monospace;

  /* Motion */
  --cd-transition: 150ms cubic-bezier(0.4, 0, 0.2, 1);

  /* Surfaces */
  --cd-bg: #191918;
  --cd-bg-soft: #202020;
  --cd-glass: rgba(37,37,37,.85);
  --cd-glass-sidebar: #202020;
  --cd-glass-strong: rgba(37,37,37,.95);
  --cd-glass-topbar: #202020;
  --cd-surface: #252525;
  --cd-surface-elevated: #2d2d2d;

  /* Borders */
  --cd-border-faint: rgba(255,255,255,.04);
  --cd-line: rgba(255,255,255,.07);
  --cd-line-strong: rgba(255,255,255,.12);

  /* Text */
  --cd-muted: #8b8b87;
  --cd-subtle: #5c5c58;
  --cd-text: #e6e6e4;

  /* Colors — Blue */
  --cd-blue: #2383e2;
  --cd-blue-glow: rgba(35,131,226,.2);
  --cd-blue-soft: rgba(35,131,226,.12);

  /* Colors — Green */
  --cd-green: #0f7b0f;
  --cd-green-glow: rgba(15,123,15,.2);

  /* Colors — Orange */
  --cd-orange: #d9730d;
  --cd-orange-glow: rgba(217,115,13,.2);

  /* Colors — Red */
  --cd-red: #e03e3e;
  --cd-red-glow: rgba(224,62,62,.2);

  /* Colors — Purple */
  --cd-purple: #6940a5;
  --cd-purple-glow: rgba(105,64,165,.2);

  /* Colors — Cyan */
  --cd-cyan: #0b6e99;
  --cd-cyan-glow: rgba(11,110,153,.2);

  /* Shadows */
  --cd-shadow: 0 1px 3px rgba(0,0,0,.3);
  --cd-shadow-soft: 0 1px 2px rgba(0,0,0,.2);

  /* Radii */
  --cd-radius: 6px;
  --cd-radius-sm: 4px;

  /* Safe Area */
  --cd-safe-bottom: env(safe-area-inset-bottom, 0px);

  /* Component — Brand Stats */
  --cd-brand-stat-bg: rgba(255,255,255,.03);
  --cd-brand-stat-border: rgba(255,255,255,.06);
  --cd-brand-stat-hover: rgba(255,255,255,.06);

  /* Component — Inputs */
  --cd-input-bg: rgba(255,255,255,.03);
  --cd-input-bg-focus: rgba(255,255,255,.05);
  --cd-segmented-bg: rgba(255,255,255,.03);

  /* Component — Buttons */
  --cd-btn-ghost-bg: rgba(255,255,255,.03);
  --cd-btn-ghost-hover: rgba(255,255,255,.06);

  /* Component — Icon Buttons */
  --cd-icon-btn-bg: rgba(255,255,255,.03);
  --cd-icon-btn-hover: rgba(255,255,255,.06);

  /* Component — Search */
  --cd-search-box-bg: rgba(255,255,255,.03);
  --cd-search-panel-bg: rgba(32,32,32,.95);

  /* Component — View Toggle */
  --cd-view-toggle-bg: rgba(255,255,255,.02);

  /* Component — File Thumbnails */
  --cd-file-thumb-bg: rgba(255,255,255,.02);

  /* Component — Badges */
  --cd-badge-bg: rgba(0,0,0,.5);

  /* Component — Empty State */
  --cd-empty-bg: rgba(255,255,255,.015);
  --cd-empty-border: rgba(255,255,255,.04);

  /* Component — Card Hover */
  --cd-card-hover-bg: rgba(255,255,255,.03);
  --cd-card-hover-border: rgba(255,255,255,.07);

  /* Component — Upload */
  --cd-progress-bg: rgba(255,255,255,.06);
  --cd-upload-zone-bg: rgba(255,255,255,.015);

  /* Component — Preview */
  --cd-preview-bg: rgba(0,0,0,.85);
  --cd-preview-btn-bg: rgba(255,255,255,.1);
  --cd-preview-btn-border: rgba(255,255,255,.15);
  --cd-preview-nav-bg: rgba(255,255,255,.06);
  --cd-preview-nav-hover: rgba(255,255,255,.14);
  --cd-preview-text: rgba(255,255,255,.78);

  /* Component — Toast */
  --cd-toast-info-bg: rgba(35,131,226,.12);
  --cd-toast-info-border: rgba(35,131,226,.2);

  /* Component — Spinner */
  --cd-spinner-border: rgba(255,255,255,.06);

  /* Component — Modal */
  --cd-modal-bg: rgba(0,0,0,.6);

  /* Effects */
  --cd-particle-opacity: 0;

}

[data-theme="light"] {
  color-scheme: light;

  /* Surfaces */
  --cd-bg: #ffffff;
  --cd-bg-soft: #f7f7f5;
  --cd-glass: rgba(255,255,255,.85);
  --cd-glass-sidebar: #f7f7f5;
  --cd-glass-strong: rgba(255,255,255,.95);
  --cd-glass-topbar: #f7f7f5;
  --cd-surface: #ffffff;
  --cd-surface-elevated: #f7f7f5;

  /* Borders */
  --cd-border-faint: rgba(15,15,15,.04);
  --cd-line: rgba(15,15,15,.10);
  --cd-line-strong: rgba(15,15,15,.18);

  /* Text */
  --cd-muted: #6b6b65;
  --cd-subtle: #9b9a97;
  --cd-text: #37352f;

  /* Colors — Blue */
  --cd-blue: #2383e2;
  --cd-blue-glow: rgba(35,131,226,.18);
  --cd-blue-soft: rgba(35,131,226,.08);

  /* Colors — Green */
  --cd-green: #0f7b0f;
  --cd-green-glow: rgba(15,123,15,.15);

  /* Colors — Orange */
  --cd-orange: #d9730d;
  --cd-orange-glow: rgba(217,115,13,.15);

  /* Colors — Red */
  --cd-red: #e03e3e;
  --cd-red-glow: rgba(224,62,62,.15);

  /* Colors — Purple */
  --cd-purple: #6940a5;
  --cd-purple-glow: rgba(105,64,165,.15);

  /* Colors — Cyan */
  --cd-cyan: #0b6e99;
  --cd-cyan-glow: rgba(11,110,153,.12);

  /* Shadows */
  --cd-shadow: 0 1px 3px rgba(15,15,15,.08);
  --cd-shadow-soft: 0 1px 2px rgba(15,15,15,.04);

  /* Radii — same as dark */
  --cd-radius: 6px;
  --cd-radius-sm: 4px;

  /* Component — Brand Stats */
  --cd-brand-stat-bg: rgba(15,15,15,.02);
  --cd-brand-stat-border: rgba(15,15,15,.06);
  --cd-brand-stat-hover: rgba(15,15,15,.03);

  /* Component — Inputs */
  --cd-input-bg: rgba(15,15,15,.02);
  --cd-input-bg-focus: rgba(15,15,15,.035);
  --cd-segmented-bg: rgba(15,15,15,.025);

  /* Component — Buttons */
  --cd-btn-ghost-bg: rgba(15,15,15,.02);
  --cd-btn-ghost-hover: rgba(15,15,15,.05);

  /* Component — Icon Buttons */
  --cd-icon-btn-bg: rgba(15,15,15,.02);
  --cd-icon-btn-hover: rgba(15,15,15,.05);

  /* Component — Search */
  --cd-search-box-bg: rgba(15,15,15,.025);
  --cd-search-panel-bg: rgba(247,247,245,.95);

  /* Component — View Toggle */
  --cd-view-toggle-bg: rgba(15,15,15,.02);

  /* Component — File Thumbnails */
  --cd-file-thumb-bg: rgba(15,15,15,.015);

  /* Component — Badges */
  --cd-badge-bg: rgba(15,15,15,.45);

  /* Component — Empty State */
  --cd-empty-bg: rgba(15,15,15,.01);
  --cd-empty-border: rgba(15,15,15,.05);

  /* Component — Card Hover */
  --cd-card-hover-bg: rgba(15,15,15,.02);
  --cd-card-hover-border: rgba(15,15,15,.06);

  /* Component — Upload */
  --cd-progress-bg: rgba(15,15,15,.05);
  --cd-upload-zone-bg: rgba(15,15,15,.01);

  /* Component — Preview */
  --cd-preview-bg: rgba(255,255,255,.96);
  --cd-preview-btn-bg: rgba(15,15,15,.05);
  --cd-preview-btn-border: rgba(15,15,15,.1);
  --cd-preview-nav-bg: rgba(15,15,15,.05);
  --cd-preview-nav-hover: rgba(15,15,15,.07);
  --cd-preview-text: rgba(55,53,47,.78);

  /* Component — Toast */
  --cd-toast-info-bg: rgba(35,131,226,.08);
  --cd-toast-info-border: rgba(35,131,226,.15);

  /* Component — Spinner */
  --cd-spinner-border: rgba(15,15,15,.05);

  /* Component — Modal */
  --cd-modal-bg: rgba(15,15,15,.3);

  /* Effects */
  --cd-particle-opacity: 0;

}