@import url('https://fonts.googleapis.com/css2?family=Fira+Code:wght@300;400;500&family=Libre+Baskerville:ital@0;1&display=swap');

:root {
  --gb-bg-hard:  #1d2021;
  --gb-bg:       #282828;
  --gb-bg-soft:  #32302f;
  --gb-bg1:      #3c3836;
  --gb-bg2:      #504945;
  --gb-bg3:      #665c54;
  --gb-bg4:      #7c6f64;
  --gb-fg:       #ebdbb2;
  --gb-fg2:      #d5c4a1;
  --gb-fg4:      #a89984;
  --gb-yellow:   #d79921;
  --gb-yellow-b: #fabd2f;
  --gb-blue-b:   #83a598;
  --gb-aqua-b:   #8ec07c;
}

/* ── CSS variable overrides (Tailwind v3 RGB channel format) ── */
:root {
  --color-theme-50:  235 219 178;
  --color-theme-100: 213 196 161;
  --color-theme-200: 168 153 132;
  --color-theme-300: 124 111 100;
  --color-theme-400: 102 92  84;
  --color-theme-500: 80  73  69;
  --color-theme-600: 60  56  54;
  --color-theme-700: 50  48  47;
  --color-theme-800: 40  40  40;
  --color-theme-900: 29  32  33;
  --color-theme-950: 20  18  18;
}

/* ── Direct Tailwind class overrides ── */
[class*="bg-theme-900"] { background-color: #1d2021 !important; }
[class*="bg-theme-800"] { background-color: #282828 !important; }
[class*="bg-theme-700"] { background-color: #32302f !important; }
[class*="bg-theme-600"] { background-color: #3c3836 !important; }
[class*="text-theme-200"] { color: var(--gb-fg)  !important; }
[class*="text-theme-300"] { color: var(--gb-fg2) !important; }
[class*="text-theme-500"] { color: var(--gb-fg4) !important; }

/* ── Base ── */
*, *::before, *::after {
  font-family: 'Fira Code', monospace !important;
}

html, body, #__NEXT_DATA__ ~ div, #page-wrapper, main {
  background-color: var(--gb-bg-hard) !important;
  color: var(--gb-fg) !important;
}

/* Catch any wrapper div that may carry a bg class */
[class*="bg-stone"], [class*="bg-zinc"], [class*="bg-neutral"] {
  background-color: var(--gb-bg-hard) !important;
}

/* ── Header underline (added by headerStyle: underlined — hide it) ── */
#information-widgets.border-b-2,
#information-widgets[class*="border-b"] { border-bottom-width: 0 !important; }

/* ── Greeting widgets: full-width and centered ── */
.information-widget-greeting {
  width: 100% !important;
  display: flex !important;
  justify-content: center !important;
  text-align: center !important;
}

/* ── Title (greeting widget, text_size: 4xl) ── */
.information-widget-greeting .text-4xl {
  font-family: 'Libre Baskerville', serif !important;
  font-style: italic !important;
  font-weight: 400 !important;
  color: var(--gb-yellow-b) !important;
  letter-spacing: -0.01em !important;
}

/* ── Subtitle (greeting widget, text_size: sm) ── */
.information-widget-greeting .text-sm {
  font-family: 'Fira Code', monospace !important;
  font-style: normal !important;
  color: var(--gb-fg4) !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
}

/* ── Info bar — transparent so it blends with page background ── */
#information-widgets,
#information-widgets > *,
#information-widgets [class*="bg-theme"],
#information-widgets [class*="bg-white"],
.information-widget-greeting,
.information-widget-greeting > * {
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
}

/* ── Search ── */
input[type="text"], input[type="search"] {
  background-color: var(--gb-bg1) !important;
  border-color: var(--gb-bg3) !important;
  color: var(--gb-fg) !important;
  border-radius: 4px !important;
}
input:focus {
  border-color: var(--gb-yellow) !important;
  box-shadow: 0 0 0 2px rgba(215,153,33,0.25) !important;
  outline: none !important;
}

/* ── Section headers ── */
h2, [class*="services-group"] span {
  font-size: 0.7rem !important;
  font-weight: 500 !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  color: var(--gb-bg4) !important;
}

/* ── Rounded corners: target Tailwind rounded classes + card elements ── */
[class*="rounded-md"],
[class*="rounded-lg"],
[class*="rounded-xl"],
[class*="rounded-2xl"] {
  border-radius: 10px !important;
  overflow: hidden !important;
}

/* ── Service cards ── */
li > div,
li > a > div {
  background-color: var(--gb-bg-soft) !important;
  border: 1px solid var(--gb-bg2) !important;
  border-radius: 10px !important;
  overflow: hidden !important;
  transition: border-color 0.2s, background-color 0.2s, transform 0.15s !important;
}
li:hover > div, li:hover > a > div {
  background-color: var(--gb-bg1) !important;
  border-color: var(--gb-yellow) !important;
  transform: translateY(-2px) !important;
}

/* ── Service name ── */
span.font-medium {
  color: var(--gb-fg) !important;
  font-weight: 500 !important;
}

/* ── Service description ── */
span.text-sm, .text-sm {
  color: var(--gb-fg4) !important;
  font-style: italic !important;
}

/* ── Widget stats ── */
.text-xs {
  color: var(--gb-aqua-b) !important;
}

/* ── Bookmarks ── */
#bookmarks a { color: var(--gb-blue-b) !important; }
#bookmarks a:hover { color: var(--gb-yellow-b) !important; }

/* ── Dividers ── */
hr { border-color: var(--gb-bg2) !important; }

/* ── Scrollbar ── */
::-webkit-scrollbar              { width: 6px; height: 6px; }
::-webkit-scrollbar-track        { background: var(--gb-bg-hard); }
::-webkit-scrollbar-thumb        { background: var(--gb-bg3); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover  { background: var(--gb-bg4); }

/* ── Selection ── */
::selection {
  background: rgba(215,153,33,0.25);
  color: var(--gb-fg);
}