/* ============================================================
   Tạp Chí Phố Wall - design tokens
   Mirror of app/assets/theme.css. Copy this file verbatim when
   starting a new surface; do not fork values.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Andada+Pro:wght@700&family=Be+Vietnam+Pro:wght@400;500;600;700&family=Inter:wght@400;500;600;700&family=Playfair+Display:ital,wght@0,600;0,700;1,600&display=swap');

/* Theme-independent: type stacks, layer scale, motion */
:root {
  --font-serif: 'Playfair Display', Georgia, 'Times New Roman', serif;   /* titles, figures, italic "voice" */
  --font-brand: 'Andada Pro', Georgia, 'Times New Roman', serif;         /* wordmark only */
  --font-sans: 'Be Vietnam Pro', 'Inter', ui-sans-serif, system-ui, sans-serif;
  --font-mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  --z-ai-sheet: 10015;
  --z-ai-dialog: 10016;

  /* house easing (not in theme.css, but the value every revamped component uses) */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-thumb: cubic-bezier(0.22, 1, 0.36, 1);
}

/* Light (default) */
:root,
[data-theme="light"] {
  color-scheme: light;
  --bg-color: #ffffff;
  --text-color: #1a1a1a;
  --text-primary: #1a1a1a;
  --text-secondary: #666;
  --text-tertiary: #999;
  --text-tab: #fff;
  --border-color: #e1e1e1;
  --border-light: #e5e5e5;
  --border-lighter: #f5f5f5;
  --input-bg: #f8f9fa;
  --card-bg: #ffffff;
  --card-border: 1px solid #e5e5e5;
  --primary-color: #374151;
  --primary-hover: #1f2937;
  --primary-light-bg: rgba(55, 65, 81, 0.08);
  --accent-color: #10b981;
  --positive-bg: #e8f5e8;
  --positive-color: #2d7d32;
  --negative-bg: #fee;
  --negative-color: #c33;
  --spinner-bg: #e1e1e1;
  --overlay-background: rgba(0, 0, 0, 0.5);
  --surface-1: #ffffff;
  --surface-2: #f8f9fa;
  --surface-3: #f0f0f0;
  --hover-bg: #f0f1f2;
  --surface-bg: #ffffff;
  --tab-bg: #f8f9fa;
  --tab-hover-bg: #f0f1f2;
  --warning-bg: #fff3cd;
  --warning-color: #856404;
  --warning-border: #ffeaa7;
  --primary-rgb: 55, 65, 81;
  --primary-color-rgb: 55, 65, 81;
  --scrollbar-thumb: #c0c4cc;
  --scrollbar-thumb-hover: #9ca3af;
}

/* Dark */
[data-theme="dark"] {
  color-scheme: dark;
  --bg-color: #1a1a1a;
  --text-color: #ffffff;
  --text-primary: #ffffff;
  --text-secondary: #b3b3b3;
  --text-tertiary: #888;
  --text-tab: #000;
  --border-color: #333;
  --border-light: #444;
  --border-lighter: #2a2a2a;
  --input-bg: #2a2a2a;
  --card-bg: #222;
  --card-border: none;
  --primary-color: #d1d5db;
  --primary-hover: #f3f4f6;
  --primary-light-bg: rgba(209, 213, 219, 0.1);
  --accent-color: #10b981;
  --positive-bg: #1a3d1a;
  --positive-color: #4caf50;
  --negative-bg: #3d1a1a;
  --negative-color: #f44336;
  --spinner-bg: #333;
  --overlay-background: rgba(0, 0, 0, 0.5);
  --surface-1: #2a2a2a;
  --surface-2: #333;
  --surface-3: #3a3a3a;
  --hover-bg: #3a3a3a;
  --surface-bg: #1a1a1a;
  --tab-bg: #2a2a2a;
  --tab-hover-bg: #3a3a3a;
  --warning-bg: #3d3a1a;
  --warning-color: #ffc107;
  --warning-border: #8b7c00;
  --primary-rgb: 209, 213, 219;
  --primary-color-rgb: 209, 213, 219;
  --scrollbar-thumb: #4b5563;
  --scrollbar-thumb-hover: #6b7280;
}

/* Reset, as in the app */
* { margin: 0; padding: 0; box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  font-family: var(--font-sans);
  background: var(--bg-color);
  color: var(--text-color);
  min-height: 100vh;
  line-height: 1.4;
  transition: background-color 0.3s ease, color 0.3s ease;
}

a { text-decoration: none; color: inherit; }

/* Thin scrollbar - the one place a radius (99px) is allowed on chrome */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb); border-radius: 99px; }
::-webkit-scrollbar-thumb:hover { background: var(--scrollbar-thumb-hover); }
* { scrollbar-width: thin; scrollbar-color: var(--scrollbar-thumb) transparent; }