/* Site theme: the home page's navy, orange and warm paper, applied everywhere.
   styles.css stays an exact copy of the Trial Search app, so this file remaps
   its tokens and restyles the shared components. Dark mode is in chat.css. */
:root {
  --brand-navy: #003A70;
  --brand-navy-deep: #002F5C;
  --brand-navy-lift: #06528C;
  --brand-orange: #CF3D00;
  --brand-orange-deep: #B23400;
  --brand-paper: #F7F4EE;

  /* Foreground roles. These flip in dark mode; the brand colors above don't. */
  --ink: var(--brand-navy);
  --accent: var(--brand-orange);
  --accent-soft: #FCEDE5;

  --dose-100: #D93A00;
  --dose-95: #F2780C;
  --dose-80: #E9A800;
  --dose-50: #1FA38A;
  --dose-30: #0E8CB5;
  --dose-10: #3F6FB5;

  --utmb-blue: var(--brand-navy);
  --utmb-blue-700: var(--brand-navy-deep);
  --utmb-blue-800: #00264A;
  --utmb-blue-600: var(--brand-navy-lift);
  --utmb-blue-50: #EAF1F8;
  --utmb-blue-100: #CFE0F0;
  --utmb-orange: var(--brand-orange);
  --utmb-orange-50: var(--accent-soft);
  --utmb-orange-700: var(--brand-orange-deep);

  --slate-50: #FAF8F4;
  --slate-100: #F3F0E9;
  --slate-200: #E6E1D8;
  --slate-300: #D3CCBF;
  --bg-muted: #F9F7F2;

  --shadow-xs: 0 1px 2px rgba(0, 38, 74, 0.05);
  --shadow-sm: 0 1px 3px rgba(0, 38, 74, 0.07), 0 1px 2px rgba(0, 38, 74, 0.04);
  --shadow-md: 0 8px 24px -6px rgba(0, 38, 74, 0.12), 0 2px 6px rgba(0, 38, 74, 0.05);
  --shadow-lg: 0 24px 48px -16px rgba(0, 38, 74, 0.22), 0 4px 12px rgba(0, 38, 74, 0.06);
}

::selection { background: rgba(207, 61, 0, 0.18); }
a { color: var(--ink); }
:focus-visible { outline-color: var(--accent); }

/* ------- Header ------- */
.site-header { border-bottom-color: var(--border); }
.brand-product-name { color: var(--ink); }
.brand:hover { color: var(--accent); }
.header-nav a:hover { color: var(--accent); }
.header-nav a.is-active { color: var(--ink); }
.header-nav a.is-active::after { background: var(--accent); }
.nav-toggle:hover { color: var(--accent); border-color: var(--accent-soft); }

/* ------- Buttons ------- */
.btn-primary {
  background: var(--brand-orange);
  box-shadow: 0 14px 28px -14px rgba(207, 61, 0, 0.7);
}
.btn-primary:hover {
  background: var(--brand-orange-deep);
  box-shadow: 0 14px 28px -12px rgba(207, 61, 0, 0.75);
}
.btn-secondary {
  background: transparent;
  color: var(--ink);
  border: 1.5px solid var(--ink);
}
.btn-secondary:hover {
  background: var(--brand-navy);
  border-color: var(--brand-navy);
  color: #fff;
}
.btn-ghost:hover { color: var(--accent); background: var(--accent-soft); }

/* ------- Sign in ------- */
.login-body {
  background:
    radial-gradient(760px 520px at 80% 0%, #fff 0%, rgba(255, 255, 255, 0) 70%),
    linear-gradient(115deg, #F6F3EC 0%, #F8F6F1 46%, #EEF5F6 100%);
}
.login-card h1 { color: var(--ink); font-weight: 700; }

/* ------- Error page ------- */
.detail > .error-box {
  max-width: 560px;
  margin: 12vh auto;
  padding: 32px;
  border-radius: var(--radius-lg);
  text-align: center;
}
.error-box h3 { text-align: center; }