/*  global.css or common.css */

/* === Root Variables === */
:root {
  --bg-dark: #0D0E10;
  --bg-right: hsl(220, 10%, 6%);
  --bg-gray: #D9D9D9;
  --bg-hover: #59A52C24;
  --text-primary: #ffffff;
  --text-secondary: #FFFFFFB3;
  --text-green: #59A52C;
  --border-color: rgba(255, 255, 255, 0.1);
  --radius: 20px;
  --transition: all 0.3s ease;
  --hover-scale: 1.05;
  --font-default: 'Roboto', sans-serif;
  --font-code: 'Courier New', Courier, monospace;
  --font-size-h1: 1.7rem;
  --font-size-p: 1rem;
}

/* === Base Reset === */

body {
  background-color: var(--bg-dark) !important;
  color: var(--text-primary);
  font-family: var(--font-default) !important;
  overflow-x: hidden;
}

h1 {
  font-family: var(--font-default) !important;
  font-size: var(--font-size-h1) !important;
  color: var(--text-primary) !important;
  font-weight: 600 !important;
}

h2, h3, h4, h5, strong, ::marker {
  font-family: var(--font-default) !important;
  /* font-size: var(--font-size-h1) !important; */
  color: var(--text-primary) !important;
  /* font-weight: 600 !important; */
}

li > code{
  color: var(--text-green ) !important;
}

p {
  color: var(--text-secondary) !important;
}

/* a {
  color: var(--text-green) !important;
  border-color: var(--text-green) !important;
  text-decoration: none;  
  color: inherit;         
  outline: none;      
} */

/* === Utility Classes === */