@import './cinematic-tokens.css';

/* Notion/Linear 亮色主题 - 极简、留白、精致 */
[data-theme="light"] {
  --bg-base: #f4f8fb;
  --bg-primary: #ffffff;
  --bg-secondary: #ecf3f8;
  --bg-tertiary: #e4eef5;
  --bg-surface: #ffffff;
  --bg-elevated: #f8fcff;
  --bg-deep: #dce8ef;
  --bg-sunken: #f0f6fa;
  --bg-hover: rgba(3, 150, 176, 0.08);
  --border-primary: rgba(20, 42, 54, 0.1);
  --border-secondary: rgba(0, 177, 210, 0.32);
  --border-subtle: rgba(20, 42, 54, 0.07);
  --text-primary: #081621;
  --text-secondary: #263845;
  --text-tertiary: #647582;
  --text-muted: #9aa8b1;
  --scrollbar-track: transparent;
  --scrollbar-thumb: rgba(91, 112, 126, 0.28);
  --scrollbar-thumb-hover: rgba(0, 177, 210, 0.55);
  --glass-bg: rgba(255, 255, 255, 0.78);
  --glass-border: rgba(20, 42, 54, 0.1);
  --nav-active-bg: rgba(0, 177, 210, 0.12);
  --nav-hover-bg: rgba(3, 150, 176, 0.08);
  --btn-primary-bg: #081621;
  --btn-primary-text: #ffffff;
  --btn-primary-hover: #123044;
  --btn-primary-shadow: rgba(0, 177, 210, 0.18);
  --btn-selected-bg: rgba(0, 177, 210, 0.12);
  --btn-selected-border: rgba(0, 177, 210, 0.34);
  --overlay-heavy: rgba(15, 15, 15, 0.6);
  --overlay-medium: rgba(15, 15, 15, 0.4);
  --overlay-light: rgba(15, 15, 15, 0.15);
  --overlay-full: rgba(15, 15, 15, 0.85);
  --overlay-border: rgba(20, 42, 54, 0.11);
  --selection-bg: rgba(0, 177, 210, 0.18);
  /* 电影感青蓝强调色 */
  --accent: #00b8d8;
  --accent-hover: #009fbd;
  --accent-muted: #57aebe;
  --accent-bg: rgba(0, 184, 216, 0.1);
  --accent-bg-hover: rgba(0, 184, 216, 0.18);
  --accent-border: rgba(0, 184, 216, 0.32);
  --accent-text: #007f98;
  --accent-text-hover: #005d72;
  --accent-on: #ffffff;
  --accent-shadow: rgba(0, 184, 216, 0.18);
  --accent-hot: #e7194a;
  --accent-hot-bg: rgba(231, 25, 74, 0.1);
  --accent-hot-border: rgba(231, 25, 74, 0.28);
  /* Toggle */
  --toggle-active: #00b8d8;
  --toggle-inactive: #c4d1d9;
  --toggle-knob: #FFFFFF;
  /* Success */
  --success: #0F7B0F;
  --success-text: #0F7B0F;
  --success-bg: rgba(15, 123, 15, 0.06);
  --success-border: rgba(15, 123, 15, 0.2);
  /* Error */
  --error: #EB5757;
  --error-text: #EB5757;
  --error-bg: rgba(235, 87, 87, 0.06);
  --error-border: rgba(235, 87, 87, 0.2);
  --error-hover-bg: rgba(235, 87, 87, 0.08);
  --error-hover-bg-strong: rgba(235, 87, 87, 0.15);
  /* Warning */
  --warning: #CB912F;
  --warning-text: #CB912F;
  --warning-bg: rgba(203, 145, 47, 0.06);
  --warning-border: rgba(203, 145, 47, 0.2);
  /* Info */
  --info: #00b8d8;
  --info-text: #007f98;
  --info-bg: rgba(0, 184, 216, 0.08);
  --info-border: rgba(0, 184, 216, 0.22);
  /* Tags */
  --tag-purple: #9065B0;
  --tag-purple-bg: rgba(144, 101, 176, 0.06);
  --tag-purple-border: rgba(144, 101, 176, 0.2);
  --tag-purple-hover: rgba(144, 101, 176, 0.08);
  /* === Modal/Toast/Progress unified tokens (Top-17) === */
  --bb-modal-overlay: rgba(15, 15, 15, 0.45);
  --bb-modal-shell-bg: var(--bg-primary);
  --bb-modal-shell-border: var(--border-secondary);
  --bb-modal-shell-shadow: 0 24px 60px rgba(20, 42, 54, 0.18), 0 0 0 1px rgba(0, 184, 216, 0.06);
  --bb-toast-bg: rgba(255, 255, 255, 0.96);
  --bb-toast-text: #081621;
  --bb-toast-border: rgba(0, 184, 216, 0.32);
  --bb-toast-success-border: rgba(15, 123, 15, 0.34);
  --bb-toast-warning-border: rgba(203, 145, 47, 0.34);
  --bb-toast-error-border: rgba(235, 87, 87, 0.34);
  --bb-progress-track: rgba(20, 42, 54, 0.1);
  --bb-progress-bar: var(--accent);
  --bb-z-overlay-base: 50;
  --bb-z-modal: 60;
  --bb-z-popover: 200;
  --bb-z-toast: 9999;

  /* Cinematic bridge for accessibility-only light mode */
  --bg-deep: #f7f5ef;       /* paper ivory, not pure white */
  --bg-primary: #fbfaf5;
  --bg-elevated: #ffffff;
  --bg-sunken: #efece4;
  --bg-card: #ffffff;
  --bg-glass: rgba(255, 255, 255, 0.86);

  --text-primary: #1a2030;
  --text-secondary: rgba(26, 32, 48, 0.72);
  --text-muted: rgba(26, 32, 48, 0.46);
  --text-accent: #0d4d6e;     /* deep teal — cyan looks washed in light */

  --accent: #0d4d6e;
  --accent-strong: #8a5a1d;   /* dark amber */
  --accent-bg: rgba(13, 77, 110, 0.08);
  --accent-hot: #cc2440;
  --accent-warm: #8a5a1d;

  --border-primary: rgba(26, 32, 48, 0.10);
  --border-secondary: rgba(26, 32, 48, 0.18);
  --overlay-light: rgba(26, 32, 48, 0.04);
  --overlay-dark: rgba(26, 32, 48, 0.42);

  --bb-modal-overlay: rgba(26, 32, 48, 0.42);
  --bb-modal-shell-bg: #ffffff;
  --bb-modal-shell-border: rgba(26, 32, 48, 0.10);
  --bb-modal-shell-shadow: 0 24px 48px -20px rgba(26, 32, 48, 0.18);
  --bb-toast-bg: #ffffff;
  --bb-toast-text: #1a2030;
  --bb-toast-border: #0d4d6e;
  --bb-progress-track: rgba(26, 32, 48, 0.10);
  --bb-progress-bar: #8a5a1d;
}