/* Ionix Assessment — Product-specific styles
   Core shell layout, theme variables, and UI primitives are provided by Core shell.css.
   This file contains only Assessment-branded tokens and page-specific styles. */

/* ── Assessment Brand Colors & Core Accent Tokens ─────────────────────── */

:root {
  --assessment-orange: #d97706;
  --assessment-orange-light: #f59e0b;
  --assessment-orange-dark: #b45309;
  --assessment-orange-bg: rgba(217, 119, 6, 0.08);
  --assessment-orange-bg-strong: rgba(217, 119, 6, 0.14);

  --ionix-product-accent: var(--assessment-orange);
  --ionix-product-accent-soft: color-mix(in srgb, var(--assessment-orange) 8%, var(--surface) 92%);
  --ionix-product-accent-strong: color-mix(in srgb, var(--assessment-orange) 22%, var(--surface) 78%);
  --ionix-product-accent-rgb: 217, 119, 6;
}

[data-theme="dark"] {
  --assessment-orange: #f59e0b;
  --assessment-orange-light: #fbbf24;
  --assessment-orange-dark: #d97706;
  --assessment-orange-bg: rgba(245, 158, 11, 0.12);
  --assessment-orange-bg-strong: rgba(245, 158, 11, 0.18);

  --ionix-product-accent-soft: color-mix(in srgb, var(--ionix-product-accent) 16%, var(--surface) 84%);
  --ionix-product-accent-strong: color-mix(in srgb, var(--ionix-product-accent) 28%, var(--surface) 72%);
}

/* ── Page Hero Headline — Assessment-specific typography ──────────────── */

.page-hero-headline {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-weight: 800;
  font-size: clamp(28px, 5vw, 40px);
  letter-spacing: -0.03em;
  line-height: 1.2;
  color: var(--text);
}

.page-hero-headline-accent {
  color: var(--assessment-orange);
}

.page-hero-headline-secondary {
  color: var(--text);
}

.page-hero-supporting {
  margin-top: 12px;
  font-size: 15px;
  color: var(--text-dim);
  line-height: 1.6;
  max-width: 520px;
  margin-left: auto;
  margin-right: auto;
}

/* ── Badges — Assessment severity colors ─────────────────────────────── */

.badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
}

.badge-success { color: var(--green); background: rgba(22,163,74,.12); }
.badge-warning { color: var(--assessment-orange); background: rgba(217,119,6,.12); }
.badge-danger  { color: var(--red); background: rgba(220,38,38,.12); }
.badge-neutral { color: var(--text-muted); background: rgba(142,142,160,.12); }

/* ── Buttons — Assessment primary ────────────────────────────────────── */

.btn-primary {
  background: var(--assessment-orange);
  border-color: var(--assessment-orange);
  color: #fff;
  padding: 8px 18px;
  border-radius: 8px;
  border: 1px solid var(--assessment-orange);
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}

.btn-primary:hover {
  background: var(--assessment-orange-dark);
  border-color: var(--assessment-orange-dark);
}

/* ── Assessment-specific loading placeholder ──────────────────────────── */

.assessment-loading-placeholder {
  padding: 24px;
  text-align: center;
  color: var(--text-muted);
  font-size: 13px;
}

/* ── Shell ownership ─────────────────────────────────────────────────────

   All navbar, profile menu, search flyout, theme toggle, dropdown menus,
   and global layout styling is provided by the Core product shell:
     js/core/shell/shell.css

   This file contains ONLY Assessment-specific page styles:
     • Product accent token values (--assessment-orange)
     • Page hero headline typography
     • Assessment-specific badges, buttons, and loading placeholders

   Assessment does NOT define shell/navbar/profile/search/theme CSS.
   ========================================================================== */