/* ddt-redesign.css - generated by scripts/redesign-concat-css.js
   = ddt-redesign-tokens.css + ddt-chrome.css. Edit the sources, re-run. */

/* assets/ddt-redesign-tokens.css
 * Redesign tokens — dark default with explicit light overrides.
 * Loaded AFTER existing token files so it cleanly overrides.
 * Spec: docs/superpowers/specs/2026-05-29-site-redesign-design.md §4
 */

:root,
html[data-theme='dark'] {
  /* Surfaces */
  --rd-bg-app:      #080c12;
  --rd-bg-surface:  #0d1117;
  --rd-bg-elevated: #0a0f1a;

  /* Text */
  --rd-text-primary: #e8edf5;
  --rd-text-muted:   #5a6a80;
  --rd-text-dim:     #3a4a5e;

  /* Borders */
  --rd-border-soft:   rgba(0, 212, 255, 0.06);
  --rd-border-strong: rgba(0, 212, 255, 0.18);

  /* Brand accents */
  --rd-accent-cyan:   #00d4ff;
  --rd-accent-purple: #7c3aed;

  /* Category accents (same in both themes) */
  --rd-cat-data:      #00d4ff;
  --rd-cat-api:       #7c3aed;
  --rd-cat-encode:    #10b981;
  --rd-cat-devops:    #f59e0b;
  --rd-cat-utilities: #a78bfa;

  /* Typography */
  --rd-font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --rd-font-mono: 'JetBrains Mono', ui-monospace, 'Cascadia Code', Menlo, Consolas, monospace;
  --rd-heading-tight: -0.03em;
  --rd-heading-tighter: -0.04em;

  /* Motion */
  --rd-trans-fast: 150ms;
  --rd-trans-med:  220ms;

  /* Radii */
  --rd-radius-sm: 7px;
  --rd-radius-md: 10px;
  --rd-radius-lg: 14px;
  --rd-radius-pill: 999px;

  /* Layout */
  --rd-nav-height: 56px;
  --rd-max-width: 1280px;
}

html[data-theme='light'] {
  --rd-bg-app:      #fafbfc;
  --rd-bg-surface:  #ffffff;
  --rd-bg-elevated: #f5f7fa;

  --rd-text-primary: #0d1117;
  --rd-text-muted:   #4a5a70;
  --rd-text-dim:     #6a7a90;

  --rd-border-soft:   rgba(13, 17, 23, 0.06);
  --rd-border-strong: rgba(0, 153, 204, 0.30);

  --rd-accent-cyan:   #0099cc;
  --rd-accent-purple: #6d28d9;

  /* Category accents tuned slightly darker for AA contrast on white */
  --rd-cat-data:      #0099cc;
  --rd-cat-api:       #6d28d9;
  --rd-cat-encode:    #047857;
  --rd-cat-devops:    #b45309;
  --rd-cat-utilities: #7c3aed;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --rd-trans-fast: 0ms;
    --rd-trans-med:  0ms;
  }
}

/* JetBrains Mono (self-hosted) */
@font-face {
  font-family: 'JetBrains Mono';
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  src: url('/assets/fonts/JetBrainsMono-Regular.woff2') format('woff2');
}
@font-face {
  font-family: 'JetBrains Mono';
  font-weight: 600;
  font-style: normal;
  font-display: swap;
  src: url('/assets/fonts/JetBrainsMono-SemiBold.woff2') format('woff2');
}
@font-face {
  font-family: 'JetBrains Mono';
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  src: url('/assets/fonts/JetBrainsMono-Bold.woff2') format('woff2');
}


/* assets/ddt-chrome.css
 * Redesigned shared chrome — top nav, mobile drawer, footer, breadcrumb.
 * Uses tokens from ddt-redesign-tokens.css.
 * Spec: docs/superpowers/specs/2026-05-29-site-redesign-design.md §5
 */

/* Hide the legacy chrome elements (kept in DOM for safety so existing JS that
   targets them doesn't error; physically removed from markup in Plan 5). The
   new chrome is inserted as a SIBLING of these elements, not a child. */
.sd-header,
.sd-footer,
.ddt-drawer,
.ddt-topnav,
#ddtPipelineToggle {
  display: none !important;
}

/* Page background uses new tokens */
html,
body {
  background: var(--rd-bg-app);
  color: var(--rd-text-primary);
  font-family: var(--rd-font-sans);
}

body {
  padding-top: var(--rd-nav-height);
}

/* --- Top navigation --- */
.rd-nav-root {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  height: var(--rd-nav-height);
  background: rgba(8, 12, 18, 0.92);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--rd-border-strong);
}
html[data-theme='light'] .rd-nav-root {
  background: rgba(255, 255, 255, 0.92);
}

.rd-nav-inner {
  height: 100%;
  max-width: var(--rd-max-width);
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.rd-nav-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--rd-text-primary);
  text-decoration: none;
}
.rd-nav-mark {
  width: 26px;
  height: 26px;
  border-radius: 6px;
  background: linear-gradient(135deg, #00d4ff 0%, #7c3aed 100%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #080c12;
  flex-shrink: 0;
}
.rd-nav-word {
  font-family: var(--rd-font-sans);
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.rd-nav-links {
  display: flex;
  gap: 4px;
}
.rd-nav-link {
  padding: 6px 12px;
  border-radius: 6px;
  color: var(--rd-text-muted);
  text-decoration: none;
  font-size: 0.875rem;
  border: 1px solid transparent;
  transition: color var(--rd-trans-fast), background var(--rd-trans-fast), border-color var(--rd-trans-fast);
}
.rd-nav-link:hover {
  color: var(--rd-text-primary);
}
.rd-nav-link.is-active {
  color: var(--rd-accent-cyan);
  background: rgba(0, 212, 255, 0.08);
  border-color: rgba(0, 212, 255, 0.2);
}

.rd-nav-right {
  display: flex;
  align-items: center;
  gap: 10px;
}
.rd-nav-theme {
  background: transparent;
  border: 1px solid var(--rd-border-strong);
  color: var(--rd-text-primary);
  width: 32px;
  height: 32px;
  border-radius: 7px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background var(--rd-trans-fast);
}
.rd-nav-theme:hover { background: var(--rd-bg-surface); }

.rd-nav-cta {
  background: linear-gradient(135deg, #00d4ff 0%, #0099cc 100%);
  color: #080c12;
  padding: 6px 14px;
  border-radius: 7px;
  text-decoration: none;
  font-weight: 700;
  font-size: 0.85rem;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: none;
}

.rd-nav-burger {
  display: none;
  background: transparent;
  border: 1px solid var(--rd-border-strong);
  color: var(--rd-text-primary);
  width: 32px;
  height: 32px;
  border-radius: 7px;
  cursor: pointer;
  align-items: center;
  justify-content: center;
}

/* Keep the icon glyphs at their intended size — without this the inline SVGs
   are flex items that get compressed on the main axis (theme toggle squished,
   mobile burger collapses to a near-invisible sliver). */
.rd-nav-theme svg,
.rd-nav-burger svg {
  flex-shrink: 0;
  width: 14px;
  height: 14px;
}

/* --- Mobile drawer --- */
.rd-nav-drawer {
  display: none;
  position: fixed;
  top: var(--rd-nav-height);
  left: 0;
  right: 0;
  background: var(--rd-bg-elevated);
  border-bottom: 1px solid var(--rd-border-strong);
  padding: 12px 16px;
  flex-direction: column;
  gap: 4px;
  z-index: 99;
}
.rd-nav-drawer.is-open { display: flex; }
.rd-nav-drawer .rd-nav-link {
  padding: 10px 12px;
  font-size: 0.95rem;
}

@media (max-width: 1023px) {
  .rd-nav-inner > .rd-nav-links,
  .rd-nav-right > .rd-nav-cta {
    display: none;
  }
  .rd-nav-burger { display: inline-flex; }
}

/* --- Footer --- */
.rd-foot-root {
  background: var(--rd-bg-elevated);
  border-top: 1px solid var(--rd-border-strong);
  padding: 48px 24px 24px;
  margin-top: 64px;
}
.rd-foot-inner {
  max-width: var(--rd-max-width);
  margin: 0 auto;
}
.rd-foot-grid {
  display: grid;
  grid-template-columns: 2fr repeat(5, 1fr);
  gap: 32px;
  margin-bottom: 32px;
}
@media (max-width: 767px) {
  .rd-foot-grid { grid-template-columns: 1fr 1fr; }
  .rd-foot-grid > :first-child { grid-column: span 2; }
}

.rd-foot-brand-blurb {
  color: var(--rd-text-dim);
  font-size: 0.85rem;
  line-height: 1.6;
  max-width: 28ch;
  margin-top: 12px;
}
.rd-foot-col-h {
  font-family: var(--rd-font-mono);
  font-size: 0.7rem;
  color: var(--rd-text-dim);
  letter-spacing: 0.14em;
  margin-bottom: 12px;
  text-transform: uppercase;
}
.rd-foot-link {
  display: block;
  color: var(--rd-text-muted);
  font-size: 0.85rem;
  padding: 3px 0;
  text-decoration: none;
  transition: color var(--rd-trans-fast);
}
.rd-foot-link:hover { color: var(--rd-accent-cyan); }

.rd-foot-bottom {
  border-top: 1px solid var(--rd-border-soft);
  padding-top: 18px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  font-family: var(--rd-font-mono);
  font-size: 0.7rem;
  color: var(--rd-text-dim);
}
.rd-foot-trust { display: inline-flex; gap: 8px; }
.rd-foot-trust-chip {
  padding: 3px 10px;
  border: 1px solid var(--rd-border-strong);
  border-radius: 6px;
}

/* --- Focus ring (a11y, applies everywhere chrome controls show) --- */
.rd-nav-link:focus-visible,
.rd-nav-theme:focus-visible,
.rd-nav-cta:focus-visible,
.rd-nav-burger:focus-visible,
.rd-foot-link:focus-visible {
  outline: 2px solid var(--rd-accent-cyan);
  outline-offset: 2px;
}

/* --- Skip link --- */
.rd-skip {
  position: absolute;
  left: -9999px;
  top: 8px;
  background: var(--rd-bg-surface);
  color: var(--rd-text-primary);
  padding: 8px 14px;
  border-radius: 6px;
  z-index: 200;
}
.rd-skip:focus { left: 16px; }