/* =============== MATERIAL SYMBOLS OUTLINED (Self-hosted) =============== */
/* Self-hosted để tránh phụ thuộc Google Fonts trên TV (không có internet)  */

/* Block 1: Variable font cho modern browsers (Chrome 66+, Firefox 62+)     */
@font-face {
  font-family: 'Material Symbols Outlined';
  font-style: normal;
  font-weight: 100 700;
  font-display: swap;
  src: url('/fonts/material-symbols-outlined.woff2') format('woff2');
}

/* Block 2: Static font cho LG webOS / TV browsers (không hỗ trợ woff2)    */
/* font-weight: 400 dùng single value để tương thích browser cũ             */
@font-face {
  font-family: 'Material Symbols Outlined';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/material-symbols-outlined.ttf') format('truetype');
}

.material-symbols-outlined {
  font-family: 'Material Symbols Outlined';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  /* Bắt buộc để ligature hoạt động - cả prefix lẫn standard */
  -webkit-font-feature-settings: 'liga' 1;
  font-feature-settings: 'liga' 1;
  -webkit-font-smoothing: antialiased;
}

/* =============== TV-Optimized System Fonts Stack =============== */
/* Using native system fonts for better performance on TV devices */

/* 
 * Font stack optimized for Smart TVs:
 * - webOS (LG): uses system-ui
 * - Tizen (Samsung): uses Tizen fonts 
 * - Android TV: uses Roboto
 * - Fallback: standard web fonts
 */

:root {
  /* TV-optimized font stack */
  --font-primary: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-display: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  --font-monospace: 'Courier New', monospace;
}

/* Apply to body */
body {
  font-family: var(--font-primary);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* TV-specific optimizations */
  text-rendering: optimizeLegibility;
}

/* Headings use display font */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: 600;
}

/* Monospace for code */
code, pre, kbd, samp {
  font-family: var(--font-monospace);
}

/* 
 * Font weight mapping for compatibility:
 * Use standard weights that work across all TV platforms
 */
.font-light { font-weight: 300; }
.font-normal { font-weight: 400; }
.font-medium { font-weight: 500; }
.font-semibold { font-weight: 600; }
.font-bold { font-weight: 700; }
.font-extrabold { font-weight: 800; }