/*
 * AVRO enterprise visual foundation
 * Neutral financial surfaces, crisp typography, and restrained brand color.
 * Loaded after each page's legacy styles so shared readability stays consistent.
 */

:root {
  --avro-bg: #0b0e11;
  --avro-bg-elevated: #101318;
  --avro-surface: #15191f;
  --avro-surface-2: #1a1f26;
  --avro-border: #272c34;
  --avro-border-strong: #343a44;
  --avro-text: #f3f4f6;
  --avro-text-secondary: #b4bac4;
  --avro-text-muted: #858d99;
  --avro-orange: #f5a623;
  --avro-orange-hover: #ffb73e;
  --avro-green: #16c784;
  --avro-red: #ea3943;
  --avro-blue: #4b8cff;
  --avro-radius: 16px;
  --avro-font: "Segoe UI Variable", "Segoe UI", Inter, -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
}

html {
  min-width: 320px;
  color-scheme: dark;
  background: var(--avro-bg);
  font-size: 16px;
  font-synthesis: none;
  -webkit-text-size-adjust: 100%;
}

html:not([data-ccp-theme="light"]):not(.theme-light) body {
  color: var(--avro-text);
  background-color: var(--avro-bg) !important;
  background-image: none !important;
}

body,
button,
input,
select,
textarea {
  font-family: var(--avro-font) !important;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  line-height: 1.5;
  letter-spacing: 0;
}

body :where(h1, h2, h3, h4, h5, h6, p, a, button, label, input, select, textarea, th, td, strong, b, small, em, span) {
  text-shadow: none !important;
}

body :where(h1, h2, h3, h4, h5, h6) {
  color: var(--avro-text);
  font-family: var(--avro-font) !important;
  font-weight: 700;
  letter-spacing: -0.025em;
  text-wrap: balance;
}

body :where(p, label, small, em) {
  letter-spacing: 0;
}

body :where(strong, b) {
  font-weight: 650;
}

body :where(button, input, select, textarea) {
  letter-spacing: 0;
}

body :where(table, input[type="number"], [class*="price"], [class*="Price"], [class*="value"], [class*="Value"], [class*="metric"], [class*="Metric"], [class*="score"], [class*="Score"]) {
  font-variant-numeric: tabular-nums lining-nums;
}

body :where(input, select, textarea)::placeholder {
  color: var(--avro-text-muted);
  opacity: 1;
}

body :where(a, button, input, select, textarea):focus-visible {
  outline: 2px solid var(--avro-orange);
  outline-offset: 2px;
}

body :where([disabled], [aria-disabled="true"]) {
  cursor: not-allowed;
}

::selection {
  color: #15100a;
  background: #ffc665;
}

/* Avoid text softness caused by applying filters or compositing to content cards. */
body :where(main, section, article, header, footer, nav, .card, .panel, .module, .shell) {
  -webkit-font-smoothing: antialiased;
}

/* Home dashboard */
html[data-avro-page="home"] body::before {
  display: none !important;
}

html[data-avro-page="home"] .container {
  padding-inline: clamp(14px, 2.4vw, 42px) !important;
}

html[data-avro-page="home"] .hero,
html[data-avro-page="home"] .ccp-hero-clean {
  width: min(100%, 1680px) !important;
  min-height: 0 !important;
  margin: 0 auto clamp(24px, 3vw, 42px) !important;
  padding: clamp(30px, 4vw, 58px) clamp(24px, 4vw, 62px) !important;
  grid-template-columns: 1fr !important;
  gap: 24px !important;
  border: 1px solid var(--avro-border) !important;
  border-top: 0 !important;
  border-radius: 0 0 24px 24px !important;
  color: var(--avro-text) !important;
  background: var(--avro-bg-elevated) !important;
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.24) !important;
  isolation: isolate;
}

html[data-avro-page="home"] .hero-brand-row {
  gap: clamp(16px, 2vw, 26px) !important;
}

html[data-avro-page="home"] .logo-mark {
  width: clamp(72px, 7vw, 98px) !important;
  height: clamp(72px, 7vw, 98px) !important;
}

html[data-avro-page="home"] .logo-svg {
  filter: none !important;
}

html[data-avro-page="home"] .hero h1,
html[data-avro-page="home"] .ccp-hero-copy h1 {
  max-width: none !important;
  color: var(--avro-text) !important;
  background: none !important;
  -webkit-background-clip: initial !important;
  background-clip: initial !important;
  -webkit-text-fill-color: currentColor !important;
  font-size: clamp(39px, 5.2vw, 72px) !important;
  font-weight: 720 !important;
  line-height: 1 !important;
  letter-spacing: -0.045em !important;
  animation: none !important;
}

html[data-avro-page="home"] .hero h1::before,
html[data-avro-page="home"] .hero h1::after,
html[data-avro-page="home"] .ccp-hero-copy h1::before,
html[data-avro-page="home"] .ccp-hero-copy h1::after {
  display: none !important;
}

html[data-avro-page="home"] .hero p,
html[data-avro-page="home"] .ccp-hero-copy p {
  max-width: 650px !important;
  margin-top: 12px !important;
  color: var(--avro-text-secondary) !important;
  font-size: clamp(16px, 1.25vw, 20px) !important;
  font-weight: 450 !important;
  line-height: 1.45 !important;
}

html[data-avro-page="home"] .ccp-hero-actions {
  gap: 9px !important;
  margin-top: 24px !important;
}

html[data-avro-page="home"] .ccp-hero-actions .btn {
  min-height: 42px !important;
  padding: 10px 17px !important;
  border: 1px solid var(--avro-border-strong) !important;
  border-radius: 9px !important;
  color: #d9dde3 !important;
  background: var(--avro-surface) !important;
  box-shadow: none !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  transform: none !important;
}

html[data-avro-page="home"] .ccp-hero-actions .btn:hover {
  color: #ffffff !important;
  border-color: #49515d !important;
  background: var(--avro-surface-2) !important;
  transform: none !important;
}

html[data-avro-page="home"] .ccp-hero-actions .btn-primary {
  color: #171108 !important;
  border-color: var(--avro-orange) !important;
  background: var(--avro-orange) !important;
}

html[data-avro-page="home"] .ccp-hero-actions .btn-primary:hover {
  color: #171108 !important;
  border-color: var(--avro-orange-hover) !important;
  background: var(--avro-orange-hover) !important;
}

/* The tools now live in the compact drawer instead of occupying the hero. */
html[data-avro-page="home"] .ccp-tools-dock {
  display: none !important;
}

html[data-avro-page="home"] :where(
  .technical-analysis-entry,
  .drawdown-entry,
  .strength-radar,
  .microcap-radar,
  .features,
  .explanation,
  .use-cases,
  .disclaimer
) {
  border-color: var(--avro-border) !important;
  background-color: var(--avro-bg-elevated) !important;
  background-image: none !important;
  box-shadow: 0 12px 34px rgba(0, 0, 0, 0.18) !important;
}

html[data-avro-page="home"] .microcap-radar::before {
  display: none !important;
}

html[data-avro-page="home"] :where(.technical-analysis-launch, .drawdown-launch, .radar-stage, .microcap-stage, .feature-card, .example) {
  border-color: var(--avro-border) !important;
  background-color: var(--avro-surface) !important;
  background-image: none !important;
  box-shadow: none !important;
}

html[data-avro-page="home"] :where(.strength-card, .microcap-card) {
  border-color: #2b3038 !important;
  background-color: #171b21 !important;
  background-image: none !important;
  box-shadow: none !important;
}

html[data-avro-page="home"] :where(.eyebrow, .strength-kicker, .microcap-kicker) {
  color: var(--avro-orange) !important;
}

html[data-avro-page="home"] :where(.technical-analysis-entry p, .drawdown-entry p, .strength-radar p, .microcap-radar p, .feature-card p, .explanation p, .use-cases p) {
  color: var(--avro-text-secondary) !important;
}

/* Smart Money pages use the same dark institutional shell. */
body:has(.sm-shell) {
  color: var(--avro-text) !important;
  background: var(--avro-bg) !important;
}

.sm-shell {
  width: min(1180px, calc(100% - 34px)) !important;
  color: var(--avro-text) !important;
}

.sm-back {
  color: var(--avro-text-secondary) !important;
}

.sm-back:hover,
.sm-card em {
  color: var(--avro-orange) !important;
}

.sm-status,
.sm-hero,
.sm-card,
.sm-module,
.sm-ready {
  border-color: var(--avro-border) !important;
  color: var(--avro-text) !important;
  background-color: var(--avro-bg-elevated) !important;
  background-image: none !important;
  box-shadow: none !important;
}

.sm-status {
  color: var(--avro-text-secondary) !important;
}

.sm-kicker {
  color: var(--avro-orange) !important;
}

.sm-hero p,
.sm-card span,
.sm-module p,
.sm-ready span {
  color: var(--avro-text-secondary) !important;
}

.sm-card:hover {
  border-color: rgba(245, 166, 35, 0.48) !important;
  background: var(--avro-surface) !important;
}

/* Scrollbars remain subtle and readable on data-heavy pages. */
html:not([data-ccp-theme="light"]):not(.theme-light) {
  scrollbar-color: #3a4049 #101318;
  scrollbar-width: thin;
}

html:not([data-ccp-theme="light"]):not(.theme-light) ::-webkit-scrollbar {
  width: 9px;
  height: 9px;
}

html:not([data-ccp-theme="light"]):not(.theme-light) ::-webkit-scrollbar-track {
  background: #101318;
}

html:not([data-ccp-theme="light"]):not(.theme-light) ::-webkit-scrollbar-thumb {
  border: 2px solid #101318;
  border-radius: 99px;
  background: #3a4049;
}

@media (max-width: 720px) {
  html[data-avro-page="home"] .container {
    padding-inline: 10px !important;
  }

  html[data-avro-page="home"] .hero,
  html[data-avro-page="home"] .ccp-hero-clean {
    padding: 28px 20px 30px !important;
    border-radius: 0 0 18px 18px !important;
  }

  html[data-avro-page="home"] .hero-brand-row {
    align-items: center !important;
  }

  html[data-avro-page="home"] .logo-mark {
    width: 62px !important;
    height: 62px !important;
  }

  html[data-avro-page="home"] .ccp-hero-actions .btn {
    flex: 1 1 145px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  html:focus-within {
    scroll-behavior: auto;
  }
}