/* =========================================================================
   Apps-BN Design System & Custom Tokens (Pure Static Edition)
   Warm Cream & Deep Maroon Aesthetic
   ========================================================================= */

:root {
  color-scheme: light;
  --primary: #7a1c28; /* maroon-800 */
  --primary-hover: #5c121d; /* maroon-900 */
  --primary-active: #3a0810; /* maroon-950 */
  --primary-fg: #ffffff;
  --primary-subtle: #fdf2f4; /* maroon-50 */
  --primary-subtle-fg: #7a1c28; /* maroon-800 */
  --primary-subtle-border: #f8c9d2; /* maroon-200 */

  --secondary: #ede4d6; /* cream-200 */
  --secondary-hover: #e0d2bd; /* cream-300 */
  --secondary-active: #cbba9e; /* cream-400 */
  --secondary-fg: #241b18; /* ink */
  --secondary-border: #e5ddcf; /* sand-border */

  --accent: #d43b60; /* maroon-500 */
  --accent-hover: #ba2449; /* maroon-600 */
  --accent-fg: #ffffff;
  --accent-subtle: #fce4e8; /* maroon-100 */
  --accent-subtle-fg: #9e1939; /* maroon-700 */
  --accent-subtle-border: #f8c9d2; /* maroon-200 */

  --canvas: #faf7f2;
  --surface: #ffffff;
  --surface-subtle: #f4efe6;
  --surface-hover: #ede4d6;
  --border-subtle: #e5ddcf;
  --border-default: #d4c7b5;
  --border-strong: #cbba9e;
  --ink-primary: #241b18;
  --ink-secondary: rgba(36, 27, 24, 0.7);
  --ink-muted: rgba(36, 27, 24, 0.45);
  --ink-inverse: #ffffff;

  --success-subtle: #ecfdf5;
  --success-subtle-fg: #065f46;
  --success-subtle-border: rgba(16, 185, 129, 0.3);
  --warning-subtle: #fffbeb;
  --warning-subtle-fg: #92400e;
  --warning-subtle-border: rgba(245, 158, 11, 0.3);
  --danger-subtle: #fdf2f4;
  --danger-subtle-fg: #7a1c28;
  --danger-subtle-border: #f8c9d2;
  --info-subtle: #f0f9ff;
  --info-subtle-fg: #075985;
  --info-subtle-border: rgba(14, 165, 233, 0.3);

  /* Color Palette Standards */
  --color-cream-50: #faf7f2;
  --color-cream-100: #f4efe6;
  --color-cream-200: #ede4d6;
  --color-cream-300: #e0d2bd;
  --color-cream-400: #cbba9e;
  --color-cream-500: #b59f7f;

  --color-maroon-50: #fdf2f4;
  --color-maroon-100: #fce4e8;
  --color-maroon-200: #f8c9d2;
  --color-maroon-300: #f29eb0;
  --color-maroon-400: #e66885;
  --color-maroon-500: #d43b60;
  --color-maroon-600: #ba2449;
  --color-maroon-700: #9e1939;
  --color-maroon-800: #7a1c28;
  --color-maroon-900: #5c121d;
  --color-maroon-950: #3a0810;

  --color-sand-border: #e5ddcf;
  --color-sand-border-dark: #d4c7b5;
  --color-ink: #241b18;
}

.dark {
  color-scheme: dark;
  --primary: #ba2449; /* maroon-600 (vibrant on dark background) */
  --primary-hover: #d43b60; /* maroon-500 */
  --primary-active: #9e1939; /* maroon-700 */
  --primary-fg: #ffffff;
  --primary-subtle: rgba(122, 28, 40, 0.4);
  --primary-subtle-fg: #f29eb0; /* maroon-300 */
  --primary-subtle-border: rgba(186, 36, 73, 0.35);

  --secondary: #2f2926;
  --secondary-hover: #38332e;
  --secondary-active: #241f1c;
  --secondary-fg: #faf7f2;
  --secondary-border: #38332e;

  --accent: #e66885; /* maroon-400 */
  --accent-hover: #f29eb0;
  --accent-fg: #ffffff;
  --accent-subtle: rgba(158, 25, 57, 0.4);
  --accent-subtle-fg: #f8c9d2;
  --accent-subtle-border: rgba(230, 104, 133, 0.3);

  --canvas: #141211;
  --surface: #241f1c;
  --surface-subtle: #1e1917;
  --surface-hover: #2f2926;
  --border-subtle: #2e2825;
  --border-default: #38332e;
  --border-strong: #4d443f;
  --ink-primary: #faf7f2;
  --ink-secondary: rgba(250, 247, 242, 0.7);
  --ink-muted: rgba(250, 247, 242, 0.45);
  --ink-inverse: #141211;

  --success-subtle: rgba(6, 78, 59, 0.4);
  --success-subtle-fg: #6ee7b7;
  --success-subtle-border: rgba(16, 185, 129, 0.3);
  --warning-subtle: rgba(120, 53, 15, 0.4);
  --warning-subtle-fg: #fcd34d;
  --warning-subtle-border: rgba(245, 158, 11, 0.3);
  --danger-subtle: rgba(122, 28, 40, 0.4);
  --danger-subtle-fg: #f8c9d2;
  --danger-subtle-border: rgba(186, 36, 73, 0.3);
  --info-subtle: rgba(7, 89, 133, 0.4);
  --info-subtle-fg: #7dd3fc;
  --info-subtle-border: rgba(14, 165, 233, 0.3);

  --color-canvas-dark: #141211;
  --color-surface-dark: #241f1c;
  --color-dark-border: #2e2825;
  --color-dark-border-subtle: #38332e;
  --color-dark-hover: #2f2926;
}

html, body {
  height: 100%;
  overflow: hidden;
  margin: 0;
  padding: 0;
}

body {
  background-color: var(--color-cream-50);
  color: var(--color-ink);
  font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
}

.dark body {
  background-color: var(--color-canvas-dark);
  color: #faf7f2;
}

/* Material Symbols Outlined Configuration */
.material-symbols-outlined {
  font-family: 'Material Symbols Outlined';
  font-weight: normal;
  font-style: normal;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-feature-settings: 'liga';
  -webkit-font-smoothing: antialiased;
  vertical-align: middle;
}

/* Custom Scrollbar - Warm Cream & Deep Maroon Style */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: var(--color-cream-50, #faf7f2);
}

::-webkit-scrollbar-thumb {
  background: #cbba9e;
  border-radius: 9999px;
  border: 2px solid var(--color-cream-50, #faf7f2);
  transition: background-color 0.2s ease;
}

::-webkit-scrollbar-thumb:hover {
  background: #7a1c28;
}

* {
  scrollbar-width: thin;
  scrollbar-color: #cbba9e #faf7f2;
}

.dark ::-webkit-scrollbar-track {
  background: var(--color-canvas-dark, #141211);
}

.dark ::-webkit-scrollbar-thumb {
  background: #38332e;
  border-color: var(--color-canvas-dark, #141211);
}

.dark ::-webkit-scrollbar-thumb:hover {
  background: #ba2449;
}

.dark * {
  scrollbar-color: #38332e #141211;
}

::selection {
  background-color: var(--color-maroon-100);
  color: var(--color-maroon-950);
}

.dark ::selection {
  background-color: var(--color-maroon-900);
  color: var(--color-maroon-100);
}

/* Text Truncation clamp-2 fallback */
.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Dialog Animation */
@keyframes modalFadeIn {
  from {
    opacity: 0;
    transform: scale(0.96);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

.animate-modal-in {
  animation: modalFadeIn 0.18s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}