/* ==========================================================================
   RESET & DESIGN TOKENS - DỰ ÁN "GIEO MẦM VÙNG CAO"
   Immersive 3D Topographic Diorama Design System
   ========================================================================== */

:root {
  /* Color space interpolation tokens with fallback */
  --in-oklab: ;
  --in-oklch: ;

  /* Brand Palette đồng bộ 100% từ Logo "Gieo Mầm Vùng Cao":
     - Xanh rừng già (#144030, #144c38)
     - Xanh đồi núi (#5c8050) & Xanh sương (#88ac84)
     - Đỏ đất nung con đường & chữ (#9c3830) & Đỏ cờ (#c8282c)
     - Vàng gỗ ấm cửa trường (#c08834) & Trắng ngà (#fcfcfc) */
  --bg-deep: #0b2219;
  --bg-forest: #144030;
  --bg-panel: rgba(16, 48, 36, 0.84);
  --bg-panel-solid: #144030;
  --bg-card-hover: rgba(26, 74, 55, 0.9);

  /* Accent Colors theo Logo */
  --accent-amber: #c08834;
  --accent-gold: #dfab58;
  --accent-terracotta: #9c3830;
  --accent-crimson: #c8282c;
  --accent-emerald: #5c8050;
  --accent-Jade: #88ac84;
  --accent-sky: #88ac84;

  /* Text Colors */
  --text-primary: #fcfcfc;
  --text-secondary: #d2e0d5;
  --text-muted: #88ac84;
  --text-dark: #0b2219;

  /* Borders & Glass */
  --border-subtle: rgba(136, 172, 132, 0.22);
  --border-highlight: rgba(192, 136, 52, 0.55);
  --glass-blur: blur(18px);
  --shadow-elevated:
    0 4px 12px rgba(5, 16, 12, 0.4),
    0 20px 48px rgba(5, 16, 12, 0.6);

  /* Typography: Đồng bộ toàn trang dùng Be Vietnam Pro */
  --font-display: 'Be Vietnam Pro', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-sans: 'Be Vietnam Pro', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: 'JetBrains Mono', monospace;

  /* Transitions */
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
}

@supports (background: linear-gradient(in oklab, white, black)) {
  :root {
    --in-oklab: in oklab;
    --in-oklch: in oklch;
  }
}

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 100%;
  color-scheme: dark;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-family: var(--font-sans);
  font-size: 1rem;
  line-height: 1.5;
  color: var(--text-primary);
  background-color: var(--bg-deep);
  text-align: start;
  overflow-wrap: break-word;
  overflow: hidden;
  width: 100vw;
  height: 100dvh;
  user-select: none;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  line-height: 1.2;
  font-weight: 600;
}

p {
  text-wrap: pretty;
  max-width: 75ch;
}

button,
input,
select {
  font: inherit;
  color: inherit;
  background: none;
  border: none;
}

button {
  cursor: pointer;
}

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

ul, ol {
  list-style: none;
}

img {
  max-width: 100%;
  display: block;
}

/* Custom Scrollbar */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: rgba(9, 19, 16, 0.4);
}

::-webkit-scrollbar-thumb {
  background: rgba(180, 198, 190, 0.25);
  border-radius: 999px;
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(245, 158, 11, 0.6);
}