/* ============================================================
   Design A - Apple-clean. Lean only.
   Everything here sits under html[data-design="a"], which app.js
   sets only when isLean() is true. The demo never matches it.
   Navy #243D66 stays the brand accent. Severity colors are untouched.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

html[data-design="a"] {
  /* Type */
  --font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-display: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-pub: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  --ls-display: -0.02em;
  --ls-title: -0.01em;
  --ls-body: 0;

  /* Neutrals: pure greys, no lavender tint */
  --ink-900: #1D1D1F;
  --text-strong: #1D1D1F;
  --text-body: #1D1D1F;
  --text-muted: #6E6E73;
  --text-faint: #8E8E93;
  --gray-050: #F9F9FB;
  --gray-100: #F2F2F7;
  --gray-200: #E5E5EA;
  --gray-300: #D1D1D6;
  --gray-400: #AEAEB2;
  --gray-500: #6E6E73;
  --surface-page: #F5F5F7;
  --surface-card: #FFFFFF;
  --surface-sunken: #F2F2F7;
  --border-hairline: #E5E5EA;
  --border-default: #D1D1D6;
  --status-all-wash: #F2F2F7;
  --focus-ring: #243D66;

  /* Shape and depth */
  --radius-md: 10px;
  --radius-lg: 16px;
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04), 0 4px 16px rgba(0, 0, 0, 0.06);
  --shadow-md: 0 2px 6px rgba(0, 0, 0, 0.04), 0 8px 24px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 4px 12px rgba(0, 0, 0, 0.05), 0 16px 40px rgba(0, 0, 0, 0.10);
  --shadow-xl: 0 24px 64px rgba(0, 0, 0, 0.14);
  --shadow-focus: 0 0 0 3px rgba(36, 61, 102, 0.30);

  /* Motion: the pressed state runs in 100ms */
  --dur-fast: 100ms;
}

html[data-design="a"] body {
  background: #F5F5F7;
  color: #1D1D1F;
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* Tabular figures, so columns of dimensions and counts line up */
  font-feature-settings: "tnum" 1;
}

/* Tracking: -0.02em at 24px and up, -0.01em at 16-20px */
html[data-design="a"] h1 { letter-spacing: -0.02em !important; }
html[data-design="a"] h2,
html[data-design="a"] h3 { letter-spacing: -0.01em !important; }

/* Mono is for IDs and numbers. Uppercase mono eyebrows and tags become
   Inter medium. Their text stays as written, so caps stay caps. */
html[data-design="a"] [style*="--font-mono"][style*="uppercase"] {
  font-family: var(--font-sans) !important;
  letter-spacing: 0.02em !important;
  font-weight: 500;
}
html[data-design="a"] [style*="--font-mono"],
html[data-design="a"] table,
html[data-design="a"] input {
  font-feature-settings: "tnum" 1;
}

/* Inputs: 10px corners */
html[data-design="a"] input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]),
html[data-design="a"] textarea,
html[data-design="a"] select {
  border-radius: 10px !important;
}

/* Pressed state on any button that has no transform of its own */
html[data-design="a"] button:not([disabled]):not([class]) {
  transition: transform 100ms ease-out;
}
html[data-design="a"] button:not([disabled]):active {
  transform: scale(0.98);
}

/* Sidebar: A's shape (pills, 40px items) on today's dark navy (Ran, 2026-10-21) */
html[data-design="a"] [data-side="a"] > button:not([aria-current]):hover,
html[data-design="a"] [data-side="a"] a:hover {
  background: rgba(255, 255, 255, 0.08) !important;
}
html[data-design="a"] [data-side="a"] [data-side-mvp] {
  min-height: 40px;
  border-radius: 999px !important;
}

/* Visible focus ring everywhere. :where keeps it weak, so a screen that
   already draws its own ring keeps it. */
:where(html[data-design="a"]) :focus-visible {
  outline: 2px solid #243D66;
  outline-offset: 2px;
}
html[data-design="a"] input:focus-visible,
html[data-design="a"] textarea:focus-visible,
html[data-design="a"] select:focus-visible {
  outline: 2px solid #243D66 !important;
  outline-offset: 1px;
}

/* The Ask HeroCon AI button */
html[data-design="a"] .hc-ai-btn { border-radius: 999px !important; }

/* Use case screen: today's navy blue page, only rounder cards and A's tracking (Ran, 2026-10-21) */
html[data-design="a"] .ucs-card { border-radius: 16px; }
html[data-design="a"] .ucs-title { letter-spacing: -0.02em; }
html[data-design="a"] .ucs-card-title { letter-spacing: -0.01em; }

/* Reduced motion: no press scale, no long transitions */
@media (prefers-reduced-motion: reduce) {
  html[data-design="a"] button:not([disabled]):active { transform: none; }
  html[data-design="a"] *,
  html[data-design="a"] *::before,
  html[data-design="a"] *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}

/* Project onboarding (Phase 2): one question per screen. Each step fades in
   and rises 12px, so the eye follows the change without a page jump. */
@keyframes np-a-in {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: none; }
}
html[data-design="a"] .np-a-step {
  animation: np-a-in 250ms ease-out both;
}
/* The title takes focus on every step for screen readers. It is not a
   control, so it shows no ring; every button and field still does. */
html[data-design="a"] .np-a-title:focus {
  outline: none;
}
@media (prefers-reduced-motion: reduce) {
  html[data-design="a"] .np-a-step { animation: none; }
}