/* ---------------------------------------------------------------------------
   GENERATED FILE - DO NOT EDIT.
   Copied from Commons/theme.css by Commons/sync-theme.sh.
   Edit the source and re-run the script; edits here will be overwritten.
   --------------------------------------------------------------------------- */
/* ============================================================================
   5N3 — Canonical design tokens
   ----------------------------------------------------------------------------
   Single source of truth for every site on the domain. Values are lifted
   verbatim from the Tracker's tailwind.config.ts + globals.css, which
   is the reference implementation. See Commons/THEME.md for the rationale.

   Non-Tailwind sites (Homepage, Profile, Blog) link this file directly:
     <link rel="stylesheet" href="/commons/theme.css">
   The tracker gets the same values through its Tailwind config — do not edit one
   without the other.
   ========================================================================== */

:root {
  /* ---- Brand accent (Ironman red) -------------------------------------- */
  --brand-50:  #fce8ea;
  --brand-100: #f8c7cc;
  --brand-200: #f09aa3;
  --brand-300: #e76d79;
  --brand-400: #df4655;   /* link/icon hover */
  --brand-500: #d72638;   /* active nav text */
  --brand-600: #d72638;   /* PRIMARY — buttons, active borders, wordmark */
  --brand-700: #b71c2f;   /* primary hover */
  --brand-800: #8f1624;
  --brand-900: #6b1019;

  /* Convenience aliases — prefer these in site CSS */
  --brand: var(--brand-600);
  --brand-hover: var(--brand-700);
  --brand-light: var(--brand-400);

  /* Brand as raw channels, for rgba() tints without hardcoding the hex */
  --brand-rgb: 215, 38, 56;

  /* ---- Surfaces --------------------------------------------------------- */
  --bg: #0a0a0a;               /* page canvas */
  --nav-bg: #0d0d0d;           /* top nav only — one step above the canvas */
  --surface: #181818;          /* cards / panels */
  --surface-elevated: #202020; /* nested panels, inputs */
  --border: #2b2b2b;           /* one border colour everywhere */
  --border-hover: #7a7a7a;     /* card hover border (= gray-500) */

  /* ---- Text ------------------------------------------------------------- */
  --text-primary: #f5f5f5;
  --text-secondary: #a0a0a0;
  --text-tertiary: #7a7a7a;    /* eyebrow labels; see contrast note below */
  --text-muted-title: #c7c7c7;

  /* ---- Semantic --------------------------------------------------------- */
  --success: #4f9a6c;
  --success-tint: #1f3d2c;
  --caution: #d9a441;
  --caution-tint: #4a3820;
  --danger: #f87171;           /* stock Tailwind red — deliberately NOT the
                                  brand red, so danger never reads as accent */

  /* ---- Shape & elevation ------------------------------------------------ */
  --radius-card: 16px;         /* cards */
  --radius-lg: 24px;           /* large feature panels */
  --radius-control: 8px;       /* buttons, inputs */
  --radius-full: 999px;        /* pills, badges, circular icon containers */

  --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.4), 0 8px 24px -12px rgba(0, 0, 0, 0.6);
  --shadow-card-hover: 0 30px 60px -24px rgba(0, 0, 0, 0.75),
                       0 0 0 1px rgba(var(--brand-rgb), 0.16),
                       0 0 44px rgba(var(--brand-rgb), 0.12);

  /* ---- Layout ----------------------------------------------------------- */
  --container-w: 72rem;        /* = max-w-6xl */
  --container-pad: 1.5rem;

  /* ---- Type ------------------------------------------------------------- */
  --font-sans: 'Inter', ui-sans-serif, system-ui, -apple-system, sans-serif;

  /* ---- Motion ----------------------------------------------------------- */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-fast: 150ms;
  --dur-med: 200ms;
  --dur-slow: 300ms;
}

/* ============================================================================
   Base — matches the tracker's globals.css
   ========================================================================== */

* { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--text-primary);
  font-family: var(--font-sans);
  font-feature-settings: "cv11", "ss01";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  line-height: 1.6;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, h4, p { margin: 0; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

::selection {
  background: rgba(var(--brand-rgb), 0.35);
  color: var(--text-primary);
}

* { scrollbar-color: var(--border) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: var(--radius-full); }

:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; }

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

/* ============================================================================
   Shared primitives — the tracker's Card / StatCard / Nav / Button, in plain CSS
   ========================================================================== */

.wrap {
  max-width: var(--container-w);
  margin: 0 auto;
  padding-inline: var(--container-pad);
}

/* ---- Eyebrow label (11px uppercase) ------------------------------------- */
.c-eyebrow {
  font-size: 0.6875rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-tertiary);
}

/* ---- Wordmark: base name + accented suffix ------------------------------ */
.c-wordmark {
  font-size: 0.875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--text-primary);
}
.c-wordmark span { color: var(--brand); }

/* ---- Buttons: exactly three tiers, no more ------------------------------ */
.c-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.9375rem;
  font-weight: 500;
  padding: 0.8125rem 1.5rem;
  border-radius: var(--radius-control);
  white-space: nowrap;
  transition: transform var(--dur-med) var(--ease),
              box-shadow var(--dur-med) var(--ease),
              background var(--dur-med) var(--ease),
              border-color var(--dur-med) var(--ease),
              color var(--dur-med) var(--ease);
}
.c-btn-primary { background: var(--brand); color: #fff; }
.c-btn-primary:hover,
.c-btn-primary:focus-visible {
  background: var(--brand-hover);
  transform: translateY(-1px);
  box-shadow: 0 14px 34px -10px rgba(var(--brand-rgb), 0.55);
}
.c-btn-secondary { border: 1px solid var(--border); color: var(--text-secondary); }
.c-btn-secondary:hover,
.c-btn-secondary:focus-visible {
  background: var(--border);
  color: var(--text-primary);
}
.c-btn-text { padding: 0; color: var(--text-tertiary); }
.c-btn-text:hover, .c-btn-text:focus-visible { color: var(--brand-light); }
.c-btn-text--danger:hover, .c-btn-text--danger:focus-visible { color: var(--danger); }

/* ---- Card --------------------------------------------------------------- */
.c-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  padding: 1.5rem;
  box-shadow: var(--shadow-card);
  transition: transform var(--dur-med) var(--ease),
              border-color var(--dur-med) var(--ease),
              box-shadow var(--dur-med) var(--ease);
}
.c-card--highlight { border-color: var(--brand); }
.c-card--interactive:hover,
.c-card--interactive:focus-within {
  transform: translateY(-2px);
  border-color: var(--border-hover);
  box-shadow: var(--shadow-card-hover);
}
.c-card-title {
  font-size: 1.125rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--text-primary);
}

/* ---- StatCard ----------------------------------------------------------- */
.c-stat-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  padding: 1rem;
}
.c-stat-card .c-stat-value {
  margin-top: 0.375rem;
  font-size: 1.25rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--text-primary);
}
.c-stat-card .c-stat-sub {
  margin-top: 0.125rem;
  font-size: 0.75rem;
  color: var(--text-tertiary);
}

/* ---- Nav ---------------------------------------------------------------- */
/* ---------------------------------------------------------------------------
   HEADER CHASSIS - the one definition for all four sites.

   A full-width sticky bar with a hairline bottom edge. Every product's header
   is this shape; only the wordmark suffix and its accent differ (see invariant
   4 in CLAUDE.md). Floating rounded pills were tried and dropped - detached
   from the page, they slide over content awkwardly on scroll and each site
   needed its own offset hacks to stop the hero hiding underneath.

   Sticky rather than fixed on purpose: sticky participates in layout, so no
   page has to reserve space for it or compensate with top padding.
   --------------------------------------------------------------------------- */
.c-topbar {
  position: sticky; top: 0; z-index: 300;
  background: color-mix(in srgb, var(--nav-bg) 82%, transparent);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border-bottom: 1px solid var(--border);
}
/* Fallback for browsers without color-mix: opaque instead of translucent,
   which is a downgrade in polish but never in legibility. */
@supports not (background: color-mix(in srgb, red 50%, transparent)) {
  .c-topbar { background: var(--nav-bg); }
}
.c-topbar-row {
  display: flex; align-items: center; gap: 0.875rem;
  padding: 0.625rem 1.25rem;
}
/* Opt-in: keeps header contents lined up with a centred page body. The Blog
   leaves this off because its header spans the sidebar too. */
.c-topbar-row--contained {
  width: 100%; max-width: var(--container-w); margin-inline: auto;
}

/* Underline nav links, as used by the Tracker and the Profile. Scoped under
   .c-nav so sites opt in rather than inherit it by accident. */
.c-nav {
  background: var(--nav-bg);
  border-bottom: 1px solid var(--border);
}
.c-nav .c-nav-link {
  display: inline-block;
  padding: 0.375rem 0.75rem;
  border-bottom: 2px solid transparent;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--text-secondary);
  transition: color var(--dur-fast) var(--ease),
              border-color var(--dur-fast) var(--ease);
}
.c-nav .c-nav-link:hover { color: var(--text-primary); }
.c-nav .c-nav-link.active {
  border-bottom-color: var(--brand);
  color: var(--brand-500);
}

/* ---- Pill / badge ------------------------------------------------------- */
.c-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.25rem 0.625rem;
  border-radius: var(--radius-full);
  border: 1px solid var(--border);
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--text-secondary);
}
.c-pill--brand {
  background: rgba(var(--brand-rgb), 0.12);
  border-color: rgba(var(--brand-rgb), 0.28);
  color: var(--brand-light);
}
.c-pill--success {
  background: rgba(79, 154, 108, 0.14);
  border-color: rgba(79, 154, 108, 0.3);
  color: var(--success);
}

/* ---- Progress bar ------------------------------------------------------- */
.c-progress {
  height: 0.5rem;
  border-radius: var(--radius-full);
  background: var(--border);
  overflow: hidden;
}
.c-progress-fill {
  height: 100%;
  border-radius: var(--radius-full);
  background: var(--brand);
  transition: width var(--dur-slow) var(--ease);
}
.c-progress-fill--met { background: var(--success); }
.c-progress-fill--over { background: var(--danger); }

/* ============================================================================
   Accessibility
   ----------------------------------------------------------------------------
   Two known AA gaps inherited from the tracker, kept here for parity rather
   than silently diverging (see the contrast table in THEME.md):
     - --text-tertiary (#7a7a7a) on --surface = 4.14:1, under the 4.5:1 bar
     - --brand-500 active nav text on --nav-bg = 3.91:1, likewise
   Bumping them to --text-secondary / --brand-400 clears AA with no visual
   change worth noticing. Do it in this file and all four sites inherit the fix.
   ========================================================================== */

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