/* ============================================================
   GORDOST LMS — Linear/Notion-inspired theme
   Corporate colors: gold + black + beige
   ============================================================ */

/* ---------- DESIGN TOKENS ---------- */
:root {
  /* Brand */
  --gordost-gold: #C9A961;
  --gordost-gold-light: #D4B876;
  --gordost-gold-soft: rgba(201, 169, 97, 0.12);
  --gordost-black: #0A0A0A;
  --gordost-charcoal: #1A1A1A;
  --gordost-beige: #F5F0E6;
  --gordost-beige-warm: #EDE5D3;

  /* Neutrals (Linear-style) */
  --gordost-bg: #FAFAF9;
  --gordost-surface: #FFFFFF;
  --gordost-border: #E8E4DC;
  --gordost-border-soft: #F0EDE6;
  --gordost-text: #1A1A1A;
  --gordost-text-secondary: #6B6B6B;
  --gordost-text-muted: #999999;

  /* Override Frappe vars */
  --frappe-primary: #C9A961;
  --primary: #C9A961;
  --primary-color: var(--gordost-gold);
}

[data-theme="dark"] {
  --gordost-bg: #0A0A0A;
  --gordost-surface: #161616;
  --gordost-border: #2A2A2A;
  --gordost-border-soft: #1F1F1F;
  --gordost-text: #F5F0E6;
  --gordost-text-secondary: #A0A0A0;
  --gordost-text-muted: #6B6B6B;
  --frappe-primary: #D4B876;
  --primary: #D4B876;
}

/* ---------- GLOBAL TYPOGRAPHY ---------- */
body, .layout-main, #app, .app {
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif !important;
  background: var(--gordost-bg) !important;
  color: var(--gordost-text) !important;
  letter-spacing: -0.011em;
}

h1, h2, h3, h4, h5, h6 {
  letter-spacing: -0.025em !important;
  font-weight: 600 !important;
}

/* ---------- NAVBAR — minimal, thin border ---------- */
.navbar, .navbar-default, .web-sidebar, header.navbar {
  background: var(--gordost-surface) !important;
  border-bottom: 1px solid var(--gordost-border) !important;
  box-shadow: none !important;
  padding: 12px 24px !important;
}

.navbar .navbar-brand, .brand-logo {
  font-weight: 600 !important;
  letter-spacing: -0.02em;
}

/* ---------- BUTTONS — Linear style: subtle, gold accent ---------- */
.btn-primary, .btn.btn-primary {
  background: var(--gordost-gold) !important;
  border-color: var(--gordost-gold) !important;
  color: var(--gordost-black) !important;
  font-weight: 500 !important;
  border-radius: 8px !important;
  padding: 8px 16px !important;
  transition: all 0.15s ease !important;
  box-shadow: none !important;
}
.btn-primary:hover {
  background: var(--gordost-gold-light) !important;
  transform: translateY(-1px);
}

.btn-secondary, .btn-default, .btn-outline-secondary {
  background: var(--gordost-surface) !important;
  border: 1px solid var(--gordost-border) !important;
  color: var(--gordost-text) !important;
  border-radius: 8px !important;
  font-weight: 500 !important;
  padding: 8px 16px !important;
}
.btn-secondary:hover {
  border-color: var(--gordost-gold) !important;
  color: var(--gordost-gold) !important;
}

/* ---------- CARDS — Linear style: clean, subtle border, no heavy shadow ---------- */
.card, .course-card, .course-list-card {
  background: var(--gordost-surface) !important;
  border: 1px solid var(--gordost-border) !important;
  border-radius: 12px !important;
  box-shadow: none !important;
  transition: border-color 0.15s ease, transform 0.15s ease !important;
}
.card:hover, .course-card:hover {
  border-color: var(--gordost-gold) !important;
  transform: translateY(-2px);
}

/* ---------- PROGRESS BARS — gold accent, thin ---------- */
.progress, .progress-bar {
  background: var(--gordost-border-soft) !important;
  border-radius: 100px !important;
  height: 4px !important;
  overflow: hidden;
}
.progress-bar[role="progressbar"], .progress-bar {
  background: var(--gordost-gold) !important;
}

/* ---------- LINKS — subtle, gold on hover ---------- */
a {
  color: var(--gordost-text) !important;
  transition: color 0.15s ease;
}
a:hover {
  color: var(--gordost-gold) !important;
}

/* ---------- FORMS — minimal inputs ---------- */
input, textarea, select, .form-control {
  border: 1px solid var(--gordost-border) !important;
  border-radius: 8px !important;
  background: var(--gordost-surface) !important;
  color: var(--gordost-text) !important;
  padding: 10px 14px !important;
  font-size: 14px !important;
}
input:focus, .form-control:focus {
  border-color: var(--gordost-gold) !important;
  box-shadow: 0 0 0 3px var(--gordost-gold-soft) !important;
  outline: none !important;
}

/* ---------- SPACING / AIRINESS (Linear/Notion feel) ---------- */
.container, .layout-main, .web-container {
  max-width: 1200px !important;
  padding: 32px 24px !important;
}

/* ---------- BADGES / TAGS — pill style ---------- */
.badge, .pill, .tag {
  background: var(--gordost-gold-soft) !important;
  color: var(--gordost-gold) !important;
  border-radius: 100px !important;
  padding: 4px 10px !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  border: none !important;
}

/* ---------- HEADINGS — refined hierarchy ---------- */
h1 { font-size: 32px !important; margin-bottom: 8px !important; }
h2 { font-size: 24px !important; margin-bottom: 6px !important; }
h3 { font-size: 20px !important; margin-bottom: 4px !important; }

/* ---------- CUSTOM SCROLLBAR (subtle) ---------- */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--gordost-border);
  border-radius: 100px;
}
::-webkit-scrollbar-thumb:hover { background: var(--gordost-gold); }