/*
 * ============================================================
 * SHOPTOOLHP — Design Tokens v1.0
 * SaaS Dark Theme — Unified Design Kit
 * Font: Plus Jakarta Sans (Google Fonts)
 * Icon: Lucide Icons (SVG, 24x24)
 * ============================================================
 */

/* Google Fonts — Plus Jakarta Sans */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&display=swap');

/* ============================================================
   COLOR TOKENS
   ============================================================ */
:root {
  /* --- Background Layers --- */
  --sth-bg-base:        #020617;   /* nền trang chính (đen xanh đậm) */
  --sth-bg-surface:     #0F172A;   /* card, sidebar, panel */
  --sth-bg-elevated:    #1E293B;   /* card hover, modal, dropdown */
  --sth-bg-overlay:     #334155;   /* input, divider, border */

  /* --- Border --- */
  --sth-border:         #334155;   /* viền mặc định */
  --sth-border-hover:   #475569;   /* viền hover */
  --sth-border-focus:   #3B82F6;   /* viền focus (input, card active) */

  /* --- Text --- */
  --sth-text-primary:   #F8FAFC;   /* tiêu đề, label quan trọng */
  --sth-text-secondary: #CBD5E1;   /* body text, mô tả */
  --sth-text-muted:     #94A3B8;   /* metadata, placeholder, disabled */
  --sth-text-xmuted:    #64748B;   /* timestamp, hint */

  /* --- Accent / Action --- */
  --sth-accent-blue:    #3B82F6;   /* info, icon active, focus ring */
  --sth-accent-cta:     #22C55E;   /* button chính, badge NEW */
  --sth-accent-hot:     #EF4444;   /* badge HOT, danger */
  --sth-accent-gold:    #F59E0B;   /* badge FULL, warning */
  --sth-accent-price:   #FCD34D;   /* hiển thị giá (contrast tốt trên dark) */
  --sth-accent-purple:  #8B5CF6;   /* tag đặc biệt, gradient */

  /* --- Semantic --- */
  --sth-success:        #22C55E;
  --sth-warning:        #F59E0B;
  --sth-danger:         #EF4444;
  --sth-info:           #3B82F6;
}

/* ============================================================
   TYPOGRAPHY TOKENS
   ============================================================ */
:root {
  --sth-font-family:    'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* Scale */
  --sth-text-xs:   11px;
  --sth-text-sm:   13px;
  --sth-text-base: 15px;
  --sth-text-md:   16px;
  --sth-text-lg:   18px;
  --sth-text-xl:   22px;
  --sth-text-2xl:  28px;

  /* Weight */
  --sth-font-light:     300;
  --sth-font-regular:   400;
  --sth-font-medium:    500;
  --sth-font-semibold:  600;
  --sth-font-bold:      700;
  --sth-font-extrabold: 800;

  /* Line height */
  --sth-lh-tight:  1.3;
  --sth-lh-normal: 1.5;
  --sth-lh-relaxed:1.7;
}

/* ============================================================
   SPACING TOKENS (8px grid)
   ============================================================ */
:root {
  --sth-space-1:  4px;
  --sth-space-2:  8px;
  --sth-space-3:  12px;
  --sth-space-4:  16px;
  --sth-space-5:  20px;
  --sth-space-6:  24px;
  --sth-space-8:  32px;
  --sth-space-10: 40px;
  --sth-space-12: 48px;
}

/* ============================================================
   BORDER RADIUS TOKENS
   ============================================================ */
:root {
  --sth-radius-sm:  6px;
  --sth-radius:     10px;
  --sth-radius-md:  12px;
  --sth-radius-lg:  16px;
  --sth-radius-xl:  20px;
  --sth-radius-full: 9999px;
}

/* ============================================================
   SHADOW TOKENS
   ============================================================ */
:root {
  --sth-shadow-sm:   0 1px 3px rgba(0,0,0,0.4);
  --sth-shadow:      0 4px 12px rgba(0,0,0,0.35);
  --sth-shadow-md:   0 8px 24px rgba(0,0,0,0.4);
  --sth-shadow-lg:   0 16px 48px rgba(0,0,0,0.45);
  --sth-shadow-blue: 0 8px 32px rgba(59,130,246,0.18);
  --sth-shadow-cta:  0 4px 20px rgba(34,197,94,0.25);
}

/* ============================================================
   TRANSITION TOKENS
   ============================================================ */
:root {
  --sth-transition-fast:   all 0.15s ease;
  --sth-transition:        all 0.20s ease;
  --sth-transition-medium: all 0.30s ease;
  --sth-transition-slow:   all 0.45s ease;
}

/* ============================================================
   Z-INDEX SCALE
   ============================================================ */
:root {
  --sth-z-base:    1;
  --sth-z-dropdown: 10;
  --sth-z-sticky:   20;
  --sth-z-fixed:    30;
  --sth-z-modal:    50;
  --sth-z-toast:    60;
  --sth-z-tooltip:  70;
}

/* ============================================================
   LAYOUT TOKENS
   ============================================================ */
:root {
  --sth-sidebar-width:        260px;  /* match main.css framework */
  --sth-sidebar-width-mini:   60px;
  --sth-navbar-height:        70px;   /* match main.css framework */
  --sth-content-max-width:    1400px;
  --sth-card-gap:             20px;
  --sth-section-padding:      var(--sth-space-6);
}

/* ============================================================
   ICON SYSTEM — Lucide Icons
   Dùng thống nhất từ: https://lucide.dev/icons/
   Size: w-4 h-4 (16px) inline | w-5 h-5 (20px) sidebar
   ViewBox: 0 0 24 24 | stroke-width: 1.75
   ============================================================ */
:root {
  --sth-icon-sm:  16px;   /* inline, badge */
  --sth-icon-md:  20px;   /* sidebar, button */
  --sth-icon-lg:  24px;   /* action icon, header */
  --sth-icon-xl:  32px;   /* feature icon */
}

/* Lucide icon base style — áp dụng cho tất cả <svg class="sth-icon"> */
.sth-icon {
  display: inline-block;
  vertical-align: middle;
  flex-shrink: 0;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.sth-icon-sm { width: var(--sth-icon-sm);  height: var(--sth-icon-sm); }
.sth-icon-md { width: var(--sth-icon-md);  height: var(--sth-icon-md); }
.sth-icon-lg { width: var(--sth-icon-lg);  height: var(--sth-icon-lg); }
.sth-icon-xl { width: var(--sth-icon-xl);  height: var(--sth-icon-xl); }

/* ============================================================
   GLOBAL BASE — áp dụng design tokens lên toàn site
   ============================================================ */

/* Font toàn site — chỉ set trên text elements, không override icon fonts */
body, h1, h2, h3, h4, h5, h6,
p, a, span, div, li, td, th,
input, textarea, select, button,
label, nav, header, footer, aside, main, section {
  font-family: var(--sth-font-family) !important;
}

/* Nền trang */
body {
  background-color: var(--sth-bg-base) !important;
  color: var(--sth-text-primary) !important;
  line-height: var(--sth-lh-normal);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Scrollbar tối */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-track {
  background: var(--sth-bg-surface);
}
::-webkit-scrollbar-thumb {
  background: var(--sth-bg-overlay);
  border-radius: var(--sth-radius-full);
}
::-webkit-scrollbar-thumb:hover {
  background: var(--sth-border-hover);
}

/* Selection */
::selection {
  background: rgba(59, 130, 246, 0.3);
  color: var(--sth-text-primary);
}

/* Focus ring nhất quán */
*:focus-visible {
  outline: 2px solid var(--sth-accent-blue);
  outline-offset: 2px;
  border-radius: var(--sth-radius-sm);
}

/* ============================================================
   UTILITY CLASSES — dùng nhanh trong HTML
   ============================================================ */

/* Text colors */
.sth-text-primary   { color: var(--sth-text-primary)   !important; }
.sth-text-secondary { color: var(--sth-text-secondary) !important; }
.sth-text-muted     { color: var(--sth-text-muted)     !important; }
.sth-text-price     { color: var(--sth-accent-price)   !important; }
.sth-text-cta       { color: var(--sth-accent-cta)     !important; }
.sth-text-hot       { color: var(--sth-accent-hot)     !important; }
.sth-text-gold      { color: var(--sth-accent-gold)    !important; }
.sth-text-blue      { color: var(--sth-accent-blue)    !important; }

/* Background colors */
.sth-bg-base        { background-color: var(--sth-bg-base)     !important; }
.sth-bg-surface     { background-color: var(--sth-bg-surface)  !important; }
.sth-bg-elevated    { background-color: var(--sth-bg-elevated) !important; }

/* Font size */
.sth-xs   { font-size: var(--sth-text-xs); }
.sth-sm   { font-size: var(--sth-text-sm); }
.sth-base { font-size: var(--sth-text-base); }
.sth-lg   { font-size: var(--sth-text-lg); }

/* Font weight */
.sth-medium   { font-weight: var(--sth-font-medium); }
.sth-semibold { font-weight: var(--sth-font-semibold); }
.sth-bold     { font-weight: var(--sth-font-bold); }

/* Cursor */
.sth-clickable { cursor: pointer; }

/* Transition */
.sth-transition      { transition: var(--sth-transition); }
.sth-transition-fast { transition: var(--sth-transition-fast); }