/* BlastPoint brand tokens for microsites.
 *
 * Source of truth: the main platform frontend (src/web/frontend/src/styles/base/tailwind.css)
 * and the BlastPointLogo component. Do not add colors here that are not in the
 * platform; if you need one, ask DevOps to add it upstream first.
 *
 * Use the semantic tokens (--bp-bg, --bp-text, --bp-primary ...) in site CSS.
 * The raw palette is here so the semantic ones have something to point at.
 */

:root {
  /* Palette */
  --bp-navy: #0a3655;          /* oklch(0.321 0.072 244.8)  primary brand blue, nav, dark surfaces */
  --bp-navy-raised: #022945;   /* oklch(0.272 0.067 245.5)  raised elements on navy */
  --bp-sky: #0284c7;           /* sky-600                    interactive primary */
  --bp-sky-hover: #0369a1;     /* sky-700 */
  --bp-logo-blue: #32b1e6;     /* the drop */
  --bp-logo-yellow: #f9d230;   /* the drop's center */
  --bp-blue-light: #f4f8fd;    /* oklch(0.978 0.008 254)    page background */
  --bp-white: #ffffff;
  --bp-slate-900: #0f172a;
  --bp-slate-600: #475569;
  --bp-slate-200: #e2e8f0;
  --bp-red: #dc2626;

  /* Semantic */
  --bp-bg: var(--bp-blue-light);
  --bp-surface: var(--bp-white);
  --bp-text: var(--bp-slate-900);
  --bp-text-muted: var(--bp-slate-600);
  --bp-border: var(--bp-slate-200);
  --bp-primary: var(--bp-sky);
  --bp-primary-hover: var(--bp-sky-hover);
  --bp-primary-text: var(--bp-white);
  --bp-nav-bg: var(--bp-navy);
  --bp-nav-text: var(--bp-white);
  --bp-accent: var(--bp-logo-yellow);
  --bp-danger: var(--bp-red);

  /* Shape and type */
  --bp-radius: 0.625rem;
  --bp-radius-sm: 0.375rem;
  --bp-font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", Arial, sans-serif;
  --bp-font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

/* Sensible defaults a site gets for free by including this file. */
.bp-body {
  margin: 0;
  background: var(--bp-bg);
  color: var(--bp-text);
  font-family: var(--bp-font-sans);
  line-height: 1.5;
}
.bp-nav {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.75rem 1.5rem;
  background: var(--bp-nav-bg);
  color: var(--bp-nav-text);
}
.bp-nav a { color: inherit; text-decoration: none; }
.bp-logo { height: 22px; width: auto; display: block; }
.bp-main { max-width: 64rem; margin: 0 auto; padding: 2rem 1.5rem; }
.bp-card {
  background: var(--bp-surface);
  border: 1px solid var(--bp-border);
  border-radius: var(--bp-radius);
  padding: 1.25rem 1.5rem;
}
.bp-btn {
  display: inline-block;
  padding: 0.55rem 1rem;
  border: 0;
  border-radius: var(--bp-radius-sm);
  background: var(--bp-primary);
  color: var(--bp-primary-text);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
}
.bp-btn:hover { background: var(--bp-primary-hover); }
.bp-muted { color: var(--bp-text-muted); }