@tailwind base;
@tailwind components;
@tailwind utilities;

/* Force the browser to show text immediately while Adobe loads */
@font-face {
  font-family: "nimbus-sans";
  font-display: swap;
}

/* The rest of your CSS, like @layer base, goes here */

/* 

site colors and fonts 
ibm plex mono
cormorant garamond
nimbus sans
=====
primary: #2D2926
accent: #D4A373
background: #F1EFE7
*/

body {
  margin: 0;
  background: #f1efe7;
  color: #2d2926;
}
.font-ibm {
	font-family: "ibm-plex-mono", sans-serif;
	font-weight: 400;
	font-style: normal;
}
.font-cormorant {
	font-family: cormorant-garamond, serif;
	font-weight: 400;
	font-style: normal;
}
.font-nimbus {
	font-family: nimbus-sans, sans-serif !important;
	font-weight: 400;
	font-style: normal;
}

/* header {
  background: #f1efe7;
}

nav a {
  font-style: normal;
  text-decoration: none;
  
}
nav a.clevercouch-brand {
  font-size: 1.75rem;
  font-weight: 400;
  color: #2D2926;
}
nav button.nav-link {
  font-size: 1.25rem !important;
}
button.btn-black {
  --bs-btn-hover-bg: #222;
} */


/* blueprint mode */
/* - BLUEPRINT MODE OVERRIDES - */

/* Only apply these styles when body has the class .blueprint-mode */
body.blueprint-mode {
	/* 1. Change the Vibe: Dark "CAD" Background */
	background-color: #0d1117 !important; 
	background-image: 
		linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
	background-size: 20px 20px; /* Graph paper effect */
	color: #00FF41 !important; /* Matrix/Terminal Green text */
	font-family: 'IBM Plex Mono', 'Courier New', monospace !important;
}

/* 2. Outline Everything */
body.blueprint-mode * {
	outline: 1px dashed rgba(0, 255, 65, 0.3) !important; /* Faint green outlines */
	box-shadow: none !important; /* Remove fancy shadows */
	border-radius: 0 !important; /* Remove rounded corners for "technical" look */
}

/* 3. Reveal the Semantic HTML Tags */
/* This puts a little label like <SECTION> or <H1> above elements */

body.blueprint-mode main::before { content: "<main>"; color: #ff00ff; display: block; font-size: 10px; margin-bottom: 5px; }
body.blueprint-mode section::before { content: "<section>"; color: #00FFFF; display: block; font-size: 10px; margin-bottom: 5px; }
body.blueprint-mode div::before { content: "<div>"; color: #555; display: inline-block; font-size: 8px; vertical-align: top; }
body.blueprint-mode h1::before { content: "<h1>"; color: #ffcc00; font-size: 10px; margin-right: 5px;}
body.blueprint-mode h2::before { content: "<h2>"; color: #ffcc00; font-size: 10px; margin-right: 5px;}
body.blueprint-mode p::before { content: "<p>"; color: #888; font-size: 10px; margin-right: 5px;}

/* 4. Simplify Images */
body.blueprint-mode img {
	filter: grayscale(100%) contrast(150%) !important;
	opacity: 0.5;
	outline: 2px solid #00FF41 !important;
}

/* 5. Hide decorative backgrounds to focus on structure */
body.blueprint-mode [class*="bg-"] {
	background-color: transparent !important;
}