/* ==================== DESIGN TOKENS ==================== */
:root {
  color-scheme: light dark;
  /* ===== Windows 11 Color Palette ===== */

  /* Background Layers (Mica-inspired) */
  --bg-solid-base: #202020;
  --bg-solid-secondary: #1c1c1c;
  --bg-solid-tertiary: #282828;
  --bg-mica: linear-gradient(
    135deg,
    rgba(32, 32, 36, 0.95) 0%,
    rgba(24, 24, 28, 0.98) 50%,
    rgba(20, 20, 24, 1) 100%
  );

  /* Beautiful ambient background */
  --bg-color: #0a0a0c;
  --bg-image:
    radial-gradient(
      ellipse 150% 100% at 25% 0%,
      rgba(96, 165, 250, 0.08) 0%,
      transparent 50%
    ),
    radial-gradient(
      ellipse 100% 150% at 80% 100%,
      rgba(168, 85, 247, 0.06) 0%,
      transparent 50%
    ),
    linear-gradient(180deg, #0f0f12 0%, #0a0a0c 100%);

  /* Acrylic/Glass Layers */
  --acrylic-bg: rgba(32, 32, 32, 0.75);
  --acrylic-bg-elevated: rgba(44, 44, 44, 0.85);
  --acrylic-blur: 20px;

  /* Card/Surface Layers */
  --card-bg: rgba(255, 255, 255, 0.06);
  --card-bg-hover: rgba(255, 255, 255, 0.1);
  --card-bg-pressed: rgba(255, 255, 255, 0.04);
  --card-bg-elevated: rgba(255, 255, 255, 0.08);

  /* Borders */
  --border-subtle: rgba(255, 255, 255, 0.1);
  --border-default: rgba(255, 255, 255, 0.15);
  --border-strong: rgba(255, 255, 255, 0.22);
  --border-focus: var(--accent-default);

  /* Stroke (Top highlight for depth) */
  --stroke-card-top: rgba(255, 255, 255, 0.12);

  /* Text Colors */
  --text-primary: rgba(255, 255, 255, 0.95);
  --text-secondary: rgba(255, 255, 255, 0.7);
  --text-tertiary: rgba(255, 255, 255, 0.5);
  --text-disabled: rgba(255, 255, 255, 0.35);
  --text-on-accent: #000000;

  /* Accent Colors (Windows 11 Default Blue) */
  --accent-default: #60cdff;
  --accent-secondary: rgba(96, 205, 255, 0.15);
  --accent-tertiary: rgba(96, 205, 255, 0.1);
  --accent-hover: #76d6ff;
  --accent-pressed: #4bc5ff;
  --accent-glow: rgba(96, 205, 255, 0.25);

  /* System Colors */
  --success-default: #6ccb5f;
  --success-bg: rgba(108, 203, 95, 0.15);
  --error-default: #ff6b6b;
  --error-bg: rgba(255, 107, 107, 0.15);
  --warning-default: #ffb938;
  --warning-bg: rgba(255, 185, 56, 0.15);
  --info-default: #60cdff;
  --info-bg: rgba(96, 205, 255, 0.15);

  /* Subject Badge custom colors */
  /* Subject Badge custom colors (Default Dark) */
  --badge-bg: rgba(96, 205, 255, 0.15);
  --badge-text: #60cdff;

  /* Legacy Aliases */
  --accent-color: var(--accent-default);
  --success-color: var(--success-default);
  --success: var(--success-default);
  --danger-color: var(--error-default);
  --error: var(--error-default);
  --warning-color: var(--warning-default);
  --warning: var(--warning-default);

  /* Shadows (Windows 11 Style) */
  --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.2);
  --shadow-md: 0 4px 8px rgba(0, 0, 0, 0.24), 0 0 1px rgba(0, 0, 0, 0.12);
  --shadow-lg: 0 8px 16px rgba(0, 0, 0, 0.28), 0 0 1px rgba(0, 0, 0, 0.12);
  --shadow-xl: 0 16px 32px rgba(0, 0, 0, 0.32), 0 0 1px rgba(0, 0, 0, 0.12);
  --shadow-flyout: 0 8px 32px rgba(0, 0, 0, 0.4), 0 0 1px rgba(0, 0, 0, 0.2);

  /* Border Radius (Windows 11) */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-pill: 9999px;
  --radius-circular: 50%;

  /* Animation Curves (Fluent Motion) */
  --ease-standard: cubic-bezier(0.33, 0, 0.67, 1);
  --ease-decelerate: cubic-bezier(0, 0, 0, 1);
  --ease-accelerate: cubic-bezier(1, 0, 1, 1);
  --ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);

  /* New Dynamic Background Animation */
  --anim-breathing-bg: breathing-gradient 15s ease infinite alternate;

  /* Durations */
  --duration-fast: 100ms;
  --duration-normal: 200ms;
  --duration-slow: 300ms;
  --duration-slower: 400ms;

  /* Layout */
  --sidebar-width: 280px;
  --sidebar-collapsed-width: 64px;
  --right-sidebar-width: 320px;
  --header-height: 64px;

  /* Typography */
  --font-family:
    "Segoe UI Variable Display", "Segoe UI", system-ui, -apple-system,
    BlinkMacSystemFont, sans-serif;
  --font-size-caption: 0.778rem; /* 14px */
  --font-size-body: 0.889rem; /* 16px */
  --font-size-subtitle: 1rem; /* 18px */
  --font-size-title: 1.222rem; /* 22px */
  --font-size-display: 1.667rem; /* 30px */

  /* Scrollbar */
  --scrollbar-size: 10px;
  --scrollbar-thumb: rgba(255, 255, 255, 0.2);
  --scrollbar-thumb-hover: rgba(255, 255, 255, 0.35);
  --scrollbar-track: transparent;

  /* Modal */
  --modal-bg: rgba(32, 32, 32, 0.95);

  /* Legacy compatibility */
  --glass-base: var(--acrylic-bg);
  --glass-border: var(--border-subtle);
  --glass-shadow: var(--shadow-lg);
  --container-bg: var(--card-bg);
  --container-hover-bg: var(--card-bg-hover);
  --item-bg: var(--card-bg);
  --item-hover-bg: var(--card-bg-hover);
  --item-active-bg: var(--card-bg-pressed);
  /* Header */
  --header-bg: var(--acrylic-bg-elevated);

  /* Spacing System (8pt grid) */
  --spacing-2xs: 4px;
  --spacing-xs: 8px;
  --spacing-sm: 12px;
  --spacing-md: 16px;
  --spacing-lg: 20px;
  --spacing-xl: 24px;
  --spacing-2xl: 32px;
  --spacing-3xl: 48px;

  /* Modal Specific Tokens */
  --modal-padding-x: var(--spacing-md);
  --modal-padding-y: var(--spacing-sm);
  --modal-gap: var(--spacing-md);
}

/* ==================== LIGHT THEME ==================== */
:root[data-theme="light"] {
  --bg-solid-base: #f3f3f3;
  --bg-solid-secondary: #fafafa;
  --bg-solid-tertiary: #ebebeb;
  --bg-mica: linear-gradient(
    135deg,
    rgba(250, 250, 252, 0.98) 0%,
    rgba(243, 243, 245, 0.99) 50%,
    rgba(240, 240, 242, 1) 100%
  );

  --bg-color: #f0f0f2;
  --bg-image:
    radial-gradient(
      ellipse 150% 100% at 25% 0%,
      rgba(96, 165, 250, 0.06) 0%,
      transparent 50%
    ),
    radial-gradient(
      ellipse 100% 150% at 80% 100%,
      rgba(168, 85, 247, 0.04) 0%,
      transparent 50%
    ),
    linear-gradient(180deg, #f5f5f7 0%, #e8e8ea 100%);

  --acrylic-bg: rgba(255, 255, 255, 0.7);
  --acrylic-bg-elevated: rgba(255, 255, 255, 0.85);

  --card-bg: rgba(255, 255, 255, 0.7);
  --card-bg-hover: rgba(255, 255, 255, 0.9);
  --card-bg-pressed: rgba(255, 255, 255, 0.5);
  --card-bg-elevated: rgba(255, 255, 255, 0.85);

  --border-subtle: rgba(0, 0, 0, 0.08);
  --border-default: rgba(0, 0, 0, 0.12);
  --border-strong: rgba(0, 0, 0, 0.2);
  --stroke-card-top: rgba(255, 255, 255, 0.6);

  --text-primary: rgba(0, 0, 0, 0.9);
  --text-secondary: rgba(0, 0, 0, 0.65);
  --text-tertiary: rgba(0, 0, 0, 0.45);
  --text-disabled: rgba(0, 0, 0, 0.3);
  --text-on-accent: #ffffff;

  --accent-default: #005fb8;
  --accent-secondary: rgba(0, 95, 184, 0.12);
  --accent-tertiary: rgba(0, 95, 184, 0.08);
  --accent-hover: #0067c0;
  --accent-pressed: #005299;
  --accent-glow: rgba(0, 95, 184, 0.2);

  --success-default: #107c10;
  --success-bg: rgba(16, 124, 16, 0.12);
  --error-default: #c42b1c;
  --error-bg: rgba(196, 43, 28, 0.12);
  --warning-default: #9d5d00;
  --warning-bg: rgba(157, 93, 0, 0.12);

  --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.05), 0 0 1px rgba(0, 0, 0, 0.1);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08), 0 0 1px rgba(0, 0, 0, 0.04);
  --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12), 0 0 1px rgba(0, 0, 0, 0.04);
  --shadow-xl: 0 12px 32px rgba(0, 0, 0, 0.15), 0 0 1px rgba(0, 0, 0, 0.04);
  --shadow-flyout: 0 8px 32px rgba(0, 0, 0, 0.18), 0 0 1px rgba(0, 0, 0, 0.06);

  --scrollbar-thumb: rgba(0, 0, 0, 0.2);
  --scrollbar-thumb-hover: rgba(0, 0, 0, 0.35);

  --modal-bg: rgba(255, 255, 255, 0.95);

  --glass-base: var(--acrylic-bg);
  --glass-border: var(--border-subtle);
  --container-bg: var(--card-bg);
  --container-hover-bg: var(--card-bg-hover);
  --item-bg: var(--card-bg);
  --item-hover-bg: var(--card-bg-hover);
  --item-active-bg: var(--card-bg-pressed);
  /* Badge Colors (Light Mode) */
  --badge-bg: rgba(0, 95, 184, 0.1);
  --badge-text: #004578;
  --header-bg: var(--acrylic-bg-elevated);
}