/* ==========================================================================
   Font Definitions
   ========================================================================== */

@font-face {
  font-family: 'OpenDyslexic Nerd Font';
  src: url('/fonts/OpenDyslexicNerdFont-Regular.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
}

/* ==========================================================================
   Nocturne Dust Theme (Dark Mode)
   Generated based on your terminal color scheme.
   ========================================================================== */

/*
 * --- Raw Color Variables ---
 * All colors from your .toml file are defined here as raw variables.
 */
:root {
  /* Primary & Core UI Colors from TOML */
  --primary-background: #1c1a18;
  --primary-foreground: #7d6d59;
  --dim-foreground: #5c564f;
  --selection-text: #7d6d59;
  --selection-background: #49433c;

  /* Normal Colors */
  --normal-black: #1c1a18;
  --normal-red: #ab5a51;
  --normal-green: #524d2d;
  --normal-yellow: #6f4e1d;
  --normal-blue: #5f586b;
  --normal-magenta: #6c4d61;
  --normal-cyan: #4c5352;
  --normal-white: #49433c;

  /* Bright Colors */
  --bright-black: #7a7064;
  --bright-red: #b84133;
  --bright-green: #6c601a;
  --bright-yellow: #8f6424;
  --bright-blue: #665784;
  --bright-magenta: #7d4167;
  --bright-cyan: #56716d;
  --bright-white: #7d6d59; /* Same as primary-foreground */

  /*
   * --- Semantic Variables ---
   * These variables apply the raw colors to website elements for easy control.
   * Change these to quickly restyle the entire site.
   */
  --page-bg: var(--primary-background);
  --text-color: var(--primary-foreground);
  --heading-color: var(--bright-white);
  --link-color: var(--bright-yellow);
  --link-hover-color: var(--bright-red);
  --border-color: var(--normal-white);
  --blockquote-border: var(--normal-blue);
  --code-background: #00000030; /* A semi-transparent black for depth */
}


/* ==========================================================================
   Base & Typography Styles
   ========================================================================== */

body {
  background-color: var(--page-bg);
  color: var(--text-color);
  font-family: 'Hermit Nerd Font', 'Courier New', Courier, monospace;
  line-height: 1.7;
  margin: 0;
  padding: 1rem;
  font-family: 'OpenDyslexic Nerd Font', sans-serif; 
}

h1, h2, h3, h4, h5, h6 {
  color: var(--heading-color);
  font-family: inherit;
  line-height: 1.3;
  margin-top: 1.5em;
  margin-bottom: 0.5em;
}

h1 { font-size: 3rem; }
h2 { font-size: 1.8rem; }
h3 { font-size: 1.5rem; }

p {
  margin-bottom: 1rem;
}

a {
  color: var(--link-color);
  text-decoration: underline;
  text-decoration-style: dotted;
  transition: color 0.2s ease-in-out;
}

a:hover, a:focus {
  color: var(--link-hover-color);
  text-decoration-style: solid;
}

strong {
  color: var(--bright-yellow);
  font-weight: normal; /* The font may be bold enough already */
}

em {
  color: var(--normal-red);
  font-style: normal; /* The font may have distinct italics already */
}


/* ==========================================================================
   Layout & Component Styles
   ========================================================================== */

/* A simple container to center your content */
.container {
  max-width: 800px;
  margin: 1rem auto;
  padding: 1rem 2rem;
  border: 1px solid var(--border-color);
}

header, footer {
  padding: 1rem 0;
  text-align: center;
  color: var(--dim-foreground);
}

hr {
  border: 0;
  height: 1px;
  background: var(--border-color);
  margin: 3rem 0;
}

blockquote {
  margin-left: 1rem;
  padding-left: 1rem;
  border-left: 4px solid var(--blockquote-border);
  color: var(--bright-black);
  font-style: italic;
}

/* For code blocks and inline code */
pre {
  background: var(--code-background);
  padding: 1em;
  overflow-x: auto;
  border-radius: 4px;
  border: 1px solid var(--border-color);
}

code {
  font-family: inherit; /* Use the same font as the body */
  background: var(--code-background);
  padding: 0.2em 0.4em;
  border-radius: 3px;
}

pre code {
  background: none;
  padding: 0;
  border-radius: 0;
}