/*
Theme Name: SodaStack
Theme URI: https://sodastack.dev
Author: SodaStack
Author URI: https://sodastack.dev
Description: Custom developer blog and merch theme
Version: 1.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: sodastack
*/

/* ==========================================================================
   Design Tokens
   ========================================================================== */

:root {
  /* SodaStack Core Palette Spec */
  --color-deep-navy: #0a192f; /* Primary Base Layer */
  --color-tech-blue: #1e3a8a; /* Structure / Borders / Overlays */
  --color-copper: #b85c38; /* Secondary Muted Orange Accent */
  --color-soda-orange: #ff6b35; /* Primary High-Contrast Call-To-Action */
  --color-mint-tech-green: #00e5ff; /* UI Feedback / Tech Neon Trim */

  /* Structural Layout Mapping */
  --bg-main: var(--color-deep-navy);
  --bg-offset: #0f2244; /* Clean dark layer offset */

  /* Typography Readability Specs */
  --text-main: #f8fafc; /* Crisp off-white text layer */
  --text-muted: #94a3b8; /* Secondary slate text layer */
  --text-light: #ffffff; /* Pure white accent text */

  --border-main: var(--color-tech-blue);
  --accent-main: var(--color-soda-orange);

  /* Layout Boundaries */
  --container-wide: 1200px;
  --container-content: 760px;

  /* Font Families */
  --font-brand: "Audiowide", sans-serif;
  --font-heading: "Audiowide", sans-serif;
  --font-body: "Inter", system-ui, -apple-system, sans-serif;
}

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

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--bg-main);
  color: var(--text-main);
  font-family: var(--font-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ==========================================================================
   Media
   ========================================================================== */

img {
  display: block;
  max-width: 100%;
  height: auto;
}

/* ==========================================================================
   Links & Navigation
   ========================================================================== */

a {
  color: var(--color-mint-tech-green);
  text-decoration: none;
  transition: color 0.2s ease;
}

a:hover {
  color: var(--color-soda-orange);
  text-decoration: none;
}
/* ==========================================================================
   Typography Rules
   ========================================================================== */

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--font-heading);
  color: var(--text-main);
  line-height: 1.2;
  letter-spacing: -0.025em;
  margin-top: 0;
}

h1 {
  font-size: clamp(2.5rem, 5vw, 4rem);
}
h2 {
  font-size: clamp(2rem, 4vw, 3rem);
}
h3 {
  font-size: clamp(1.5rem, 3vw, 2.2rem);
}

p {
  margin-top: 0;
  margin-bottom: 1.5rem;
  color: var(--text-muted); /* Keeps paragraph readability clean and soft */
}

/* ==========================================================================
   WordPress Native Blocks & Defaults
   ========================================================================== */

.aligncenter {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.wp-caption {
  max-width: 100%;
}

.sticky {
  border-left: 4px solid var(--accent-main);
  padding-left: 1rem;
  background: var(--bg-offset);
}