/* ==============================================
   BASE: Design Tokens + Reset + Typography
   ============================================== */

:root {
  /* Brand palette */
  --color-purple:  #5B21B6;
  --color-blue:    #2563EB;
  --color-teal:    #0F766E;
  --color-green:   #15803D;

  /* Gradients */
  --grad-brand:    linear-gradient(135deg, #5B21B6, #2563EB);
  --grad-hero:     linear-gradient(135deg, #1E1B4B, #312E81 48%, #0F766E);
  --grad-topbar:   linear-gradient(90deg, #5B21B6, #2563EB);

  /* Backgrounds */
  --bg-page:       #F8FAFC;
  --bg-white:      #ffffff;
  --bg-subtle:     #F1F5F9;
  --bg-code:       #0E0B1A;

  /* Text */
  --text-primary:   #0F172A;
  --text-secondary: #64748B;
  --text-muted:     #94A3B8;

  /* Border */
  --border:        #E2E8F0;
  --border-subtle: #F1F5F9;

  /* Typography */
  --font-body: 'Be Vietnam Pro', system-ui, -apple-system, sans-serif;
  --font-mono: 'JetBrains Mono', 'Courier New', monospace;

  /* Layout */
  --max-width:   1280px;
  --header-h:    68px;
  --topbar-h:    38px;

  /* Shadows */
  --shadow-sm: 0 1px 3px rgba(15,23,42,.06);
  --shadow-md: 0 4px 16px rgba(15,23,42,.08);
  --shadow-lg: 0 20px 40px rgba(15,23,42,.12);

  /* Radius */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 18px;
  --radius-xl: 24px;
  --radius-full: 9999px;

  /* Transitions */
  --t-fast:   150ms ease;
  --t-normal: 250ms ease;
  --t-slow:   400ms cubic-bezier(.2,.7,.2,1);

  /* Aliases kept for any parent-theme overrides */
  --color-primary:       #2563EB;
  --color-primary-hover: #1D4ED8;
  --color-text:          #0F172A;
  --color-text-muted:    #64748B;
  --color-bg:            #F8FAFC;
  --color-border:        #E2E8F0;
  --container-max:       1240px;
  --font-code:           'JetBrains Mono', monospace;

  /* Spacing scale (derived from existing 8/12/16/18/20/24px usage) */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 32px;
  --space-8: 40px;

  /* Font sizes (aligned with existing 11-40px scale used across theme) */
  --text-xs:  12px;
  --text-sm:  13.5px;
  --text-lg:  17px;
  --text-2xl: 24px;

  /* Font weights */
  --font-medium:   500;
  --font-semibold: 600;

  /* Line heights */
  --leading-tight:   1.2;
  --leading-snug:    1.4;
  --leading-relaxed: 1.7;

  /* Additional color aliases (derived from existing --color-* / brand tokens) */
  --color-primary-light: rgba(37, 99, 235, 0.08);
  --color-bg-subtle:     var(--bg-subtle);
  --color-bg-muted:      #E2E8F0;
  --color-code-bg:       var(--bg-code);
  --color-code-text:     #E2E8F0;
  --color-text-subtle:   var(--text-muted);
  --color-success:       #15803D;
  --color-warning:       #B45309;
  --color-danger:        #DC2626;

  /* Transitions */
  --transition-fast: var(--t-fast);

  /* Surface aliases used by single.css */
  --surface:     var(--bg-white);
  --surface-alt: var(--bg-subtle);
  --text:        var(--text-primary);

  /* z-index scale */
  --z-base:           1;
  /* #site-header PHẢI cao hơn #reading-progress: submenu dropdown là con của
     #site-header, và z-index của 1 phần tử con không bao giờ "thoát" được khỏi
     mức stacking context của cha nó dù đặt cao thế nào — nếu #site-header thấp
     hơn #reading-progress (position:fixed, là anh em ngang hàng của #site-header
     qua #page), thanh reading-progress sẽ luôn đè lên submenu bất kể submenu tự
     đặt z-index bao nhiêu. Đây chính là lỗi thực tế đã xảy ra. */
  --z-header:         1002;
  --z-progress:       1001;
  --z-share:          40;
  --z-nav-submenu:    200;
  --z-fab:            1200;
  --z-sheet:          1300;
  --z-drawer-overlay: 1400;
  --z-drawer:         1500;
  --z-search:         2000;
  --z-search-alt:     2100;
  --z-modal:          9500;
  --z-toast:          9999;
  --z-lightbox:       9100;
}

/* Keyframes */
@keyframes ghit-fade-in { from { opacity:0; transform:translateY(10px); } to { opacity:1; transform:none; } }
@keyframes ghit-slide-in { from { opacity:0; transform:translateX(-12px); } to { opacity:1; transform:none; } }
@keyframes ghit-spin { to { transform:rotate(360deg); } }

/* Reset */
*, *::before, *::after { box-sizing: border-box; }

html {
  font-size: 100%;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* Chặn tràn ngang: dùng clip (không tạo scroll container) thay vì hidden,
     vì overflow-x:hidden trên html/body sẽ vô hiệu hóa position:sticky của
     #site-header (sticky bị phá khi ancestor có overflow khác visible). */
  overflow-x: clip;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

#btn-scrollup { display: none !important; }

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.6;
  color: var(--text-primary);
  background: var(--bg-page);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}

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

a {
  color: var(--color-purple);
  text-decoration: none;
  transition: color var(--t-fast);
}
a:hover { color: var(--color-blue); }

body, button, input, select, textarea { font-family: var(--font-body); }