/*
Theme Name:   Todd M. O'Rourke — Cyber-Noir
Theme URI:    https://toddmorourke.com
Description:  Professional cyberpunk child theme for toddmorourke.com. Dark, technical, credible — a senior SEO Director's personal brand. Built on GeneratePress with full template overrides, CSS custom properties, and vanilla JS. No page builder, no jQuery.
Author:       Todd M. O'Rourke
Author URI:   https://toddmorourke.com
Template:     generatepress
Version:      1.0.0
License:      GNU General Public License v2 or later
License URI:  http://www.gnu.org/licenses/gpl-2.0.html
Text Domain:  toddmorourke-child
*/

/* ==========================================================================
   Design tokens — single source of truth.
   Every other stylesheet (components.css, layout.css, blog.css) and all
   templates reference these. No hardcoded hex values should appear outside
   this :root block.
   ========================================================================== */

:root {
  /* Backgrounds */
  --color-bg:           #09090f;   /* near-black, slight blue cast */
  --color-bg-surface:   #111119;   /* card/section surfaces */
  --color-bg-raised:    #16161f;   /* slightly elevated elements */

  /* Grid / borders */
  --color-border:       #1e1e2e;   /* default borders */
  --color-border-glow:  #2a2a4a;   /* hover borders */

  /* Text */
  --color-text-primary:   #e4e4f0; /* main body text */
  --color-text-secondary: #8888aa; /* muted / captions */
  --color-text-dim:       #55556a; /* very dim / placeholders */

  /* Accent — electric cyan */
  --color-accent:       #00e5c0;   /* primary neon accent */
  --color-accent-dim:   #00e5c020; /* accent tint for backgrounds */
  --color-accent-hover: #00ffcc;   /* brighter on hover */

  /* Secondary accent — neon magenta (use sparingly) */
  --color-accent2:      #e040fb;

  /* Semantic */
  --color-danger:       #ff4060;
  --color-warning:      #ffb020;
  --color-success:      #00e5c0;   /* reuse accent for success */

  /* Typography scale */
  --font-display:  'Space Grotesk', sans-serif;   /* headings */
  --font-body:     'Inter', sans-serif;           /* body text */
  --font-mono:     'JetBrains Mono', monospace;   /* labels, code, // comments */

  /* Spacing */
  --space-xs:  0.25rem;
  --space-sm:  0.5rem;
  --space-md:  1rem;
  --space-lg:  2rem;
  --space-xl:  4rem;
  --space-2xl: 8rem;

  /* Borders */
  --radius-sm: 2px;
  --radius-md: 4px;
  --radius-lg: 8px;

  /* Max content width */
  --max-w: 1200px;
  --max-w-text: 720px;

  /* Header height (shared by header + body offset) */
  --header-h: 64px;
}

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

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text-primary);
  font-family: var(--font-body);
  font-size: 17px;
  font-weight: 400;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

/* Account for the fixed header when jumping to in-page anchors. */
:target {
  scroll-margin-top: calc(var(--header-h) + var(--space-lg));
}

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

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

a:hover {
  color: var(--color-accent-hover);
}

/* ==========================================================================
   Typography
   ========================================================================== */

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--font-display);
  color: var(--color-text-primary);
  margin: 0 0 var(--space-md);
  font-weight: 700;
}

h1 {
  font-size: clamp(40px, 7vw, 72px);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.02em;
}

h2 {
  font-size: clamp(32px, 4.5vw, 48px);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.01em;
}

h3 {
  font-size: clamp(20px, 2.5vw, 24px);
  font-weight: 500;
  line-height: 1.3;
}

h4 {
  font-size: 20px;
  font-weight: 500;
}

p {
  margin: 0 0 var(--space-md);
}

strong,
b {
  font-weight: 700;
  color: var(--color-text-primary);
}

code,
pre,
kbd {
  font-family: var(--font-mono);
  font-size: 0.9em;
}

::selection {
  background: var(--color-accent);
  color: var(--color-bg);
}

/* Accessibility: visible focus ring for keyboard users. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

/* Skip link for keyboard / screen-reader users. */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 999;
  padding: var(--space-sm) var(--space-md);
  background: var(--color-accent);
  color: var(--color-bg);
  font-family: var(--font-mono);
  font-size: 12px;
}

.skip-link:focus {
  left: var(--space-md);
  top: var(--space-md);
  color: var(--color-bg);
}

/* Screen-reader-only utility. */
.screen-reader-text {
  border: 0;
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  height: 1px;
  width: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  word-wrap: normal !important;
}

/* Respect reduced-motion preferences globally. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}