/*
Theme Name:  GrowthEngine
Theme URI:   https://github.com/your-org/gengine-wp-theme
Author:      GrowthEngine
Description: GrowthEngine Brand System v3.0 — standardized WordPress base theme. Dark-first, dual-theme, opinionated design tokens. Built for use as a parent theme.
Version:     1.0.0
Requires at least: 6.3
Tested up to: 6.7
Requires PHP: 8.1
License:     GPL-2.0-or-later
Text Domain: gengine
Tags:        dark, custom-colors, custom-logo, custom-menu, editor-style, featured-images, full-width-template, threaded-comments, translation-ready, wide-blocks
*/

/* =============================================================================
   DESIGN TOKENS — GrowthEngine Brand System v3.0
   ============================================================================= */

:root {
  /* ── Brand ─────────────────────────────────────────── */
  --combustion:    #F07820;
  --ember-light:   #FF9A3C;
  --ember-deep:    #C75D14;

  /* ── Dark surfaces (default) ───────────────────────── */
  --void:          #080808;
  --ember-dark:    #141414;
  --surface-2:     #1B1B1B;
  --surface-3:     #232323;
  --hairline:      rgba(244, 241, 236, 0.08);
  --hairline-strong: rgba(244, 241, 236, 0.14);

  /* ── Text ──────────────────────────────────────────── */
  --bone:          #F4F1EC;
  --steam:         #C8C4BC;
  --muted:         rgba(244, 241, 236, 0.56);
  --faint:         rgba(244, 241, 236, 0.36);

  /* ── Semantic ──────────────────────────────────────── */
  --signal-green:  #4CAF50;
  --signal-red:    #E53935;
  --signal-amber:  #F59E0B;

  /* ── Spacing scale ─────────────────────────────────── */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  24px;
  --space-6:  32px;
  --space-7:  48px;
  --space-8:  64px;
  --space-9:  80px;
  --space-10: 120px;

  /* ── Border radius ─────────────────────────────────── */
  --radius-sm:  6px;
  --radius-md:  10px;
  --radius-lg:  14px;
  --radius-xl:  20px;
  --radius-full: 999px;

  /* ── Layout ────────────────────────────────────────── */
  --header-h:      64px;
  --sidebar-w:     248px;
  --content-max:   1200px;
  --content-narrow: 720px;

  /* ── Typography ────────────────────────────────────── */
  --display: 'Syne', sans-serif;
  --body:    'Geist', sans-serif;
  --mono:    'Geist Mono', monospace;

  /* ── Motion ────────────────────────────────────────── */
  --ease:     cubic-bezier(0.16, 1, 0.3, 1);
  --duration: 160ms;
}

/* Light theme overrides */
[data-theme="light"] {
  --void:            #F5F5F4;
  --ember-dark:      #FFFFFF;
  --surface-2:       #FAFAF9;
  --surface-3:       #EFEFED;
  --hairline:        rgba(8, 8, 8, 0.08);
  --hairline-strong: rgba(8, 8, 8, 0.14);
  --bone:            #0A0A0A;
  --steam:           #404040;
  --muted:           rgba(8, 8, 8, 0.58);
  --faint:           rgba(8, 8, 8, 0.38);
}

/* =============================================================================
   RESET & BASE
   ============================================================================= */

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 16px);
  text-size-adjust: 100%;
}

html, body {
  background: var(--void);
  color: var(--bone);
  font-family: var(--body);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "ss01", "cv11";
}

img, svg, video, canvas, audio, iframe, embed, object {
  display: block;
  max-width: 100%;
}

img, video { height: auto; }

button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }
input, select, textarea { font-family: inherit; color: inherit; }
a { color: var(--combustion); text-decoration: none; transition: color var(--duration) var(--ease); }
a:hover { color: var(--ember-light); }

::selection { background: var(--combustion); color: var(--void); }

.tab-num,
.metric,
.kpi-value,
.data { font-variant-numeric: tabular-nums; }

/* =============================================================================
   TYPOGRAPHY — Base HTML elements
   ============================================================================= */

h1, h2, h3, h4, h5, h6 {
  font-family: var(--display);
  font-weight: 800;
  line-height: 1.1;
  color: var(--bone);
  margin-bottom: 0.5em;
}

h1 { font-size: clamp(36px, 5.5vw, 64px); letter-spacing: -0.045em; line-height: 0.98; }
h2 { font-size: clamp(28px, 4vw,  44px); letter-spacing: -0.035em; line-height: 1.02; }
h3 { font-size: clamp(22px, 3vw,  28px); letter-spacing: -0.025em; font-weight: 700; line-height: 1.1; }
h4 { font-size: clamp(18px, 2vw,  22px); letter-spacing: -0.02em;  font-weight: 700; }
h5 { font-size: 18px; letter-spacing: -0.015em; font-weight: 700; }
h6 { font-size: 15px; letter-spacing: -0.01em;  font-weight: 700; }

.accent { color: var(--combustion); }

p {
  color: var(--steam);
  margin-bottom: 1rem;
  line-height: 1.7;
  max-width: 72ch;
}

p:last-child { margin-bottom: 0; }
p strong, p b  { color: var(--bone); font-weight: 600; }

code {
  font-family: var(--mono);
  font-size: 0.875em;
  background: var(--surface-2);
  padding: 2px 6px;
  border-radius: 4px;
  color: var(--ember-light);
  font-weight: 500;
}

pre {
  background: var(--ember-dark);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-md);
  padding: 20px 24px;
  margin: 24px 0;
  overflow-x: auto;
  font-family: var(--mono);
  font-size: 13px;
  line-height: 1.7;
  color: var(--steam);
}

pre code {
  background: none;
  padding: 0;
  border-radius: 0;
  color: inherit;
  font-size: inherit;
}

blockquote {
  border-left: 2px solid var(--combustion);
  padding: 4px 0 4px 24px;
  margin: 28px 0;
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(18px, 2.5vw, 22px);
  letter-spacing: -0.02em;
  line-height: 1.4;
  color: var(--bone);
}

blockquote cite {
  display: block;
  margin-top: 12px;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--combustion);
}

ul, ol {
  padding-left: 1.5rem;
  color: var(--steam);
  line-height: 1.7;
  margin-bottom: 1rem;
}

ul li, ol li { margin-bottom: 0.4rem; }

ul { list-style: none; }

ul li::before {
  content: '—';
  color: var(--combustion);
  font-weight: 700;
  display: inline-block;
  width: 1.4em;
  margin-left: -1.5rem;
}

table {
  width: 100%;
  border-collapse: collapse;
  background: var(--ember-dark);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-md);
  overflow: hidden;
  margin-bottom: 24px;
  font-size: 14px;
}

thead th {
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--faint);
  text-align: left;
  padding: 14px 18px;
  background: var(--void);
  border-bottom: 1px solid var(--hairline);
}

tbody td {
  padding: 14px 18px;
  border-bottom: 1px solid var(--hairline);
  color: var(--steam);
  vertical-align: top;
}

tbody tr:last-child td { border-bottom: none; }
tbody tr:hover { background: var(--surface-2); }

hr {
  border: none;
  border-top: 1px solid var(--hairline);
  margin: 40px 0;
}

abbr[title] {
  text-decoration: underline dotted;
  cursor: help;
}

mark {
  background: rgba(240, 120, 32, 0.25);
  color: var(--bone);
  padding: 0 3px;
  border-radius: 3px;
}

small { font-size: 0.875em; color: var(--muted); }

kbd {
  font-family: var(--mono);
  font-size: 11px;
  background: var(--surface-2);
  border: 1px solid var(--hairline);
  border-radius: 4px;
  padding: 2px 6px;
  color: var(--bone);
}

/* =============================================================================
   UTILITY CLASSES
   ============================================================================= */

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

.container {
  width: 100%;
  max-width: var(--content-max);
  margin-inline: auto;
  padding-inline: var(--space-6);
}

.container--narrow {
  max-width: var(--content-narrow);
}

.text-combustion { color: var(--combustion); }
.text-bone       { color: var(--bone); }
.text-steam      { color: var(--steam); }
.text-muted      { color: var(--muted); }

.font-display { font-family: var(--display); }
.font-mono    { font-family: var(--mono); }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--combustion);
}

.eyebrow .dot {
  width: 5px;
  height: 5px;
  background: var(--combustion);
  border-radius: 50%;
  flex-shrink: 0;
}