/*
  site-shell.css — SINGLE SOURCE OF TRUTH for the Noetic brand system,
  page wrapper and top navigation.

  Linked in the <head> of every page AFTER each page's inline <style>, so the
  :root token redefinitions and component overrides here win by cascade order.
  This is how the whole site is re-skinned centrally without editing every page.

  BRAND (from the Noetic design system):
  - Ink   (charcoal, never pure black)  → structure, weight, seriousness
  - Grit  (hazard orange, RATIONED)     → the single most important action per view
  - Steel (cold blue-grey)              → the calm counterweight, secondary accents
  - Bone  (warm off-white/grey)         → surfaces; never clinical
  - Inter only; boldness comes from weight (up to 900), not a second face.
*/

/* ── Design tokens ──────────────────────────────────────────────────────── */
:root {
  /* Ink scale */
  --ink-950: #141414;
  --ink-900: #1a1a1a;
  --ink-800: #212121;
  --ink-700: #2e2e2e;
  --ink-600: #3d3d3d;
  --ink-500: #565656;

  /* Grit scale (hazard orange — deliberate, not an error state) */
  --grit-300: #ff8a5c;
  --grit-400: #ff5a1f;
  --grit-500: #e8491d;
  --grit-600: #c73c14;
  --grit-700: #9e2f10;

  /* Steel scale */
  --steel-300: #7a838c;
  --steel-400: #5c6670;
  --steel-500: #4a5560;
  --steel-600: #3b444d;
  --steel-700: #2c333a;

  /* Bone scale (warm neutrals) */
  --bone-50: #faf8f4;
  --bone-100: #f2efe9;
  --bone-200: #e7e2d8;
  --bone-300: #d6cfc2;
  --bone-400: #b3ab9c;
  --bone-500: #8b8477;
  --bone-600: #635d53;

  /* Semantic (low-chroma; danger ≠ Grit brand) */
  --ok-100: #e2efe8;
  --ok-500: #3f7d5c;
  --warn-100: #f7ecd8;
  --warn-500: #c98a1e;
  --danger-100: #f4ddd9;
  --danger-500: #b5321f;
  --info-100: #e4e8ec;
  --info-500: #4a5560;

  /* Surfaces & text roles */
  --surface-page: var(--bone-50);
  --surface-card: #ffffff;
  --text-primary: var(--ink-900);
  --text-secondary: var(--ink-500);
  --text-tertiary: var(--bone-600);

  /* Type */
  --font-sans: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --text-display-2xl: 72px;
  --text-display-xl: 56px;
  --text-display-lg: 44px;
  --text-heading-xl: 32px;
  --text-heading-lg: 24px;
  --text-heading-md: 20px;
  --text-heading-sm: 17px;
  --text-body-lg: 17px;
  --text-body: 15px;
  --text-body-sm: 13px;
  --text-caption: 12px;
  --text-overline: 11px;
  --tracking-display: -0.03em;
  --tracking-heading: -0.01em;
  --tracking-overline: 0.08em;
  --lh-normal: 1.5;
  --lh-relaxed: 1.65;

  /* Space (4px grid) */
  --space-1: 4px;  --space-2: 8px;  --space-3: 12px; --space-4: 16px;
  --space-6: 24px; --space-8: 32px; --space-12: 48px; --space-16: 64px;

  /* Radius (tight & engineered; pills for tags only) */
  --radius-xs: 2px; --radius-sm: 4px; --radius-md: 6px;
  --radius-lg: 10px; --radius-xl: 14px; --radius-pill: 999px;

  /* Elevation (low & cool — borders do the structural work) */
  --shadow-xs: 0 1px 2px rgba(20, 20, 20, 0.05);
  --shadow-sm: 0 1px 3px rgba(20, 20, 20, 0.07);
  --shadow-md: 0 2px 6px rgba(20, 20, 20, 0.09);
  --shadow-lg: 0 4px 12px rgba(20, 20, 20, 0.11);
  --shadow-xl: 0 8px 24px rgba(20, 20, 20, 0.13);
  --shadow-grit: 0 2px 10px rgba(232, 73, 29, 0.35);

  /* ── Legacy variable bridge ─────────────────────────────────────────────
     Every page defines its own :root vars inline; this file loads after them,
     so these redefinitions win and re-skin all var()-based styling at once. */
  --bg: var(--surface-page);
  --bg-elevated: var(--surface-card);
  --text-main: var(--text-primary);
  --text-muted: var(--text-secondary);
  --border-subtle: var(--bone-200);
  --border-default: var(--bone-300);
  --text: var(--text-primary);
  --muted: var(--text-secondary);
  --danger: var(--danger-500);
  --warning: var(--warn-500);
  --link: var(--grit-600);
}

/* ── Global surface + body text ─────────────────────────────────────────── */
body {
  font-size: var(--text-body) !important;   /* 15px brand body, uniform site-wide */
  font-family: var(--font-sans) !important;
  background: var(--surface-page) !important;
  color: var(--text-primary) !important;
}

::selection { background: rgba(232, 73, 29, 0.22); }

a { color: inherit; }

/* ── Uniform page title (h1) across the whole site ──────────────────────
   Inter regular 22px — matches the navigation scale. */
h1 {
  font-size: 22px !important;
  font-weight: 400 !important;
  letter-spacing: var(--tracking-heading) !important;
  line-height: 1.35 !important;
  margin: 0 0 12px !important;
  text-decoration: none !important;
  font-family: var(--font-sans) !important;
  color: var(--text-primary) !important;
}

h2, h3 { letter-spacing: var(--tracking-heading); color: var(--text-primary); }

/* Section headers inside page content follow the same format as h1/nav:
   Inter regular 22px, no decoration. (Footer h2s are overline labels and
   sit outside <main>, so they keep their own style.) */
main h2 {
  font-size: 22px !important;
  font-weight: 400 !important;
  text-decoration: none !important;
  letter-spacing: var(--tracking-heading) !important;
  color: var(--text-primary) !important;
}

/* ── Page wrapper: identical full width + padding on every page ───────── */
.page {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 24px 40px 64px !important;
  box-sizing: border-box !important;
  align-self: stretch !important; /* stretch inside flex-column bodies */
}

/* ── Top navigation: 3-column grid, account link pinned far right ─────── */
.top-nav {
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr) auto !important;
  align-items: center !important;
  column-gap: 24px !important;
  row-gap: 8px !important;
  width: 100% !important;
  padding-bottom: 20px !important;
  margin-bottom: 32px !important;
  border-bottom: 1px solid var(--border-default) !important;
}

/* Navigation items are Inter regular 22px — the logo is plain text so it
   matches them exactly (and shares their hover behaviour). */
.top-nav,
.top-nav a,
.top-nav .nav-logo,
.top-nav .top-nav-account {
  font-size: 22px !important;
  font-weight: 400 !important;
  line-height: 1.35 !important;
}

.top-nav a { color: var(--text-primary) !important; text-decoration: none !important; }
.top-nav a:hover { color: var(--grit-600) !important; }

.top-nav a.active {
  text-decoration: underline !important;
  text-decoration-color: var(--steel-400) !important;
  text-underline-offset: 4px !important;
}

.top-nav .nav-logo {
  grid-column: 1 / 2 !important;
  margin-right: 32px !important;
  white-space: nowrap !important;
  letter-spacing: var(--tracking-heading) !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.25em !important;
  cursor: pointer !important;
}

/* The wordmark is built from child spans (dots + text); make them follow the
   logo's size even on pages with universal font-size resets (e.g. admin). */
.top-nav .nav-logo span { font-size: inherit !important; }

/* Twin-dot brand icon, sized in em so it tracks the wordmark's font size.
   Box ratio matches the official asset (404:263 ≈ 1.536). The circles are the
   full height of the box, sized to the wordmark's cap height and centred with
   the letters (per the logo lockup). */
.nav-logo-dots {
  display: inline-block;
  height: 0.92em;
  width: 1.41em;   /* 0.92 × 1.536 */
  flex-shrink: 0;
}
.nav-logo-dots svg { display: block; width: 100%; height: 100%; }

.nav-logo-ariad {
  text-decoration: underline;
  text-decoration-color: var(--steel-400);
  text-underline-offset: 4px;
  margin-left: 0.16em;
}

.top-nav-links {
  grid-column: 2 / 3 !important;
  display: flex !important;
  gap: 44px !important;
  align-items: center !important;
  justify-content: flex-start !important;
  min-width: 0 !important;
  flex-wrap: wrap !important;
}

.top-nav-links a { white-space: nowrap !important; }

/* The account link is ALWAYS the 3rd grid column, pinned to the right. */
.top-nav-account {
  grid-column: 3 / 4 !important;
  justify-self: end !important;
  align-self: center !important;
  margin: 0 !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
  text-align: right !important;
}

/* ── Footer: Ink panel (replaces the old green band) ────────────────────── */
footer, .site-footer {
  background: var(--ink-900) !important;
  color: var(--bone-100) !important;
}
footer a, .site-footer a { color: var(--bone-300) !important; text-decoration: none; }
footer a:hover, .site-footer a:hover { color: #ffffff !important; }
.site-footer h2 { color: var(--bone-50) !important; }
.site-footer p, .site-footer li { color: var(--bone-300) !important; }
.site-footer-bottom { border-top: 1px solid rgba(250, 248, 244, 0.14) !important; }
.site-footer-meta { color: var(--bone-400) !important; }

/* ── Buttons: Grit marks the single most important action per view; ──────
      everything secondary is Ink/Steel outline on Bone. */
.button-primary,
.auth-button:not(.secondary),
.plan-cta:not(:disabled),
.newsletter-button,
.launch-btn,
.cta {
  background: var(--grit-500) !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: var(--radius-sm) !important;
  font-weight: 400 !important;  /* regular, like the nav */
  font-size: 18px !important;   /* sits with the 22px nav scale */
}
.button-primary:hover,
.auth-button:not(.secondary):hover,
.plan-cta:not(:disabled):hover,
.launch-btn:hover,
.newsletter-button:hover {
  background: var(--grit-600) !important;
}
.button-primary:disabled,
.auth-button:disabled,
.newsletter-button:disabled {
  background: var(--bone-200) !important;
  color: var(--bone-500) !important;
}
.plan-cta:disabled { background: var(--bone-200) !important; color: var(--bone-500) !important; border-radius: var(--radius-sm) !important; }

.button-secondary,
.auth-button.secondary {
  background: transparent !important;
  color: var(--text-secondary) !important;
  border: 1px solid var(--border-default) !important;
  border-radius: var(--radius-sm) !important;
  font-size: 18px !important;
  font-weight: 400 !important;
}
.button-secondary:hover,
.auth-button.secondary:hover {
  background: var(--bone-100) !important;
  border-color: var(--steel-400) !important;
  color: var(--text-primary) !important;
}

.button-danger { background: var(--danger-500) !important; color: #fff !important; border-radius: var(--radius-sm) !important; border: none !important; font-size: 18px !important; font-weight: 400 !important; }

/* Sandbox connect: quiet Steel counterpart (no green tint) */
#connectSandboxButton:hover {
  background: var(--bone-100) !important;
  border-color: var(--steel-400) !important;
  transform: translateY(-1px);
}

/* ── Badges / pills: Ink structure; Grit-on-Ink for the beta marker ─────── */
.beta-pill, .membership-beta {
  background: var(--ink-900) !important;
  color: var(--grit-400) !important;
  letter-spacing: var(--tracking-overline) !important;
}
.plan-badge--current { background: var(--ink-900) !important; color: #ffffff !important; }
.plan--current { border-color: var(--grit-500) !important; }
.filter-btn--active {
  background: var(--ink-900) !important;
  color: #ffffff !important;
  border-color: var(--ink-900) !important;
}

/* Inputs: warm borders, Grit focus */
input:focus, select:focus, textarea:focus {
  border-color: var(--grit-400) !important;
  box-shadow: 0 0 0 2px rgba(232, 73, 29, 0.15) !important;
  outline: none !important;
}

/* ── Responsive: keep account top-right, wrap links below when tight ──── */
@media (max-width: 980px) {
  .top-nav { column-gap: 16px !important; }
  .top-nav-links { gap: 26px !important; }
}

@media (max-width: 720px) {
  .top-nav { grid-template-columns: 1fr auto !important; }
  .top-nav .nav-logo { grid-column: 1 / 2 !important; grid-row: 1 !important; }
  .top-nav-account { grid-column: 2 / 3 !important; grid-row: 1 !important; }
  .top-nav-links { grid-column: 1 / -1 !important; grid-row: 2 !important; }
}
