/* ============================================================
   MasterSlides Admin — design tokens
   Tzu Chi deep blue + neutral gray. Light / dark.
   ============================================================ */

:root {
  /* Tzu Chi blue scale */
  --blue-900: #0c2c52;
  --blue-800: #0f3a6b;
  --blue-700: #134a86;
  --blue-600: #1a5da6;
  --blue-500: #2470c0;
  --blue-400: #4f93d6;
  --blue-300: #8fbce8;
  --blue-100: #dcebf8;
  --blue-50:  #eef5fc;

  /* Neutrals */
  --gray-950: #0e1217;
  --gray-900: #151b23;
  --gray-850: #1b222c;
  --gray-800: #232c38;
  --gray-700: #323d4c;
  --gray-600: #4a5564;
  --gray-500: #677283;
  --gray-400: #8b95a4;
  --gray-300: #b6bdc8;
  --gray-200: #d7dce3;
  --gray-150: #e4e8ee;
  --gray-100: #eef1f5;
  --gray-50:  #f6f8fa;
  --white:    #ffffff;

  /* Semantic state */
  --green-600: #1f7a52;
  --green-100: #def0e6;
  --amber-600: #9a6a07;
  --amber-100: #f6ecd2;
  --red-600:   #b5392b;
  --red-700:   #93291d;
  --red-100:   #f7e0dc;

  --shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.06), 0 1px 3px rgba(16, 24, 40, 0.04);
  --shadow-md: 0 4px 12px rgba(16, 24, 40, 0.08), 0 2px 4px rgba(16, 24, 40, 0.05);
  --shadow-lg: 0 12px 32px rgba(16, 24, 40, 0.14), 0 4px 10px rgba(16, 24, 40, 0.08);
  --shadow-pop: 0 8px 28px rgba(12, 44, 82, 0.18);

  --radius-sm: 5px;
  --radius: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;

  /* density-driven (overridden by [data-density]) */
  --row-h: 52px;
  --cell-px: 16px;
  --font-list: 15px;

  --font-sans: "Noto Sans TC", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;
}

/* ---- Light theme (default) ---- */
:root, [data-theme="light"] {
  --bg: var(--gray-50);
  --surface: var(--white);
  --surface-2: var(--gray-50);
  --surface-3: var(--gray-100);
  --hover: var(--gray-100);
  --row-sel: var(--blue-50);
  --row-sel-border: var(--blue-300);
  --border: var(--gray-150);
  --border-strong: var(--gray-200);
  --text: #16202d;
  --text-2: var(--gray-500);
  --text-3: var(--gray-400);
  --primary: var(--blue-700);
  --primary-hover: var(--blue-800);
  --primary-weak: var(--blue-50);
  --primary-weak-border: var(--blue-100);
  --on-primary: #ffffff;
  --focus-ring: var(--blue-400);

  --pub-fg: var(--green-600);
  --pub-bg: var(--green-100);
  --draft-fg: var(--gray-600);
  --draft-bg: var(--gray-150);
  --danger: var(--red-600);
  --danger-hover: var(--red-700);
  --danger-weak: var(--red-100);
  --caution-fg: var(--amber-600);
  --caution-bg: var(--amber-100);

  --scrim: rgba(15, 26, 40, 0.42);
}

/* ---- Dark theme ---- */
[data-theme="dark"] {
  --bg: var(--gray-950);
  --surface: var(--gray-900);
  --surface-2: var(--gray-850);
  --surface-3: var(--gray-800);
  --hover: var(--gray-850);
  --row-sel: rgba(36, 112, 192, 0.16);
  --row-sel-border: var(--blue-600);
  --border: var(--gray-800);
  --border-strong: var(--gray-700);
  --text: #e7ecf3;
  --text-2: var(--gray-400);
  --text-3: var(--gray-500);
  --primary: var(--blue-400);
  --primary-hover: var(--blue-300);
  --primary-weak: rgba(36, 112, 192, 0.14);
  --primary-weak-border: rgba(79, 147, 214, 0.32);
  --on-primary: #08233f;
  --focus-ring: var(--blue-400);

  --pub-fg: #6fd49e;
  --pub-bg: rgba(31, 122, 82, 0.22);
  --draft-fg: var(--gray-300);
  --draft-bg: var(--gray-800);
  --danger: #e3796b;
  --danger-hover: #ef8b7d;
  --danger-weak: rgba(181, 57, 43, 0.22);
  --caution-fg: #e0b65f;
  --caution-bg: rgba(154, 106, 7, 0.22);

  --scrim: rgba(3, 7, 12, 0.62);
}

[data-density="compact"] {
  --row-h: 40px;
  --cell-px: 12px;
  --font-list: 13.5px;
}
[data-density="comfortable"] {
  --row-h: 52px;
  --cell-px: 16px;
  --font-list: 15px;
}
[data-density="spacious"] {
  --row-h: 64px;
  --cell-px: 20px;
  --font-list: 16px;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  font-family: var(--font-sans);
  background: var(--bg);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-size: 15px;
  line-height: 1.5;
}
button { font-family: inherit; }
::selection { background: var(--blue-300); color: #08233f; }

/* Scrollbars */
* { scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 8px; border: 2px solid var(--surface); }
*::-webkit-scrollbar-track { background: transparent; }

.app-root { height: 100vh; display: flex; flex-direction: column; overflow: hidden; }

/* Focus visibility */
:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 1px; }
.no-focus-ring:focus-visible { outline: none; }