/**
 * Global design tokens and base styles (loaded before frontend.css).
 * Bootstrap 5.3.3 utilities remain; these variables theme the app consistently.
 */
:root {
  /* Surfaces */
  --app-bg: #f1f5f9;
  --app-surface: #ffffff;
  --app-surface-muted: #f8fafc;
  --app-surface-elevated: #ffffff;

  /* Text */
  --app-text: #0f172a;
  --app-text-secondary: #475569;
  --app-text-muted: #64748b;
  --app-text-inverse: #f8fafc;

  /* Brand / accent (aligns with typical Bootstrap primary use) */
  --app-accent: #2563eb;
  --app-accent-hover: #1d4ed8;
  --app-accent-subtle: rgba(37, 99, 235, 0.12);
  --app-accent-ring: rgba(37, 99, 235, 0.35);

  /* Button system */
  --btn-primary-bg: #60a5fa;
  --btn-primary-hover: #3b82f6;
  --btn-primary-active: #2563eb;
  --btn-primary-text: #f8fbff;

  --btn-secondary-bg: #f1f5f9;
  --btn-secondary-hover: #e2e8f0;
  --btn-secondary-active: #cbd5e1;
  --btn-secondary-text: #0f172a;

  --btn-success-bg: #4ade80;
  --btn-success-hover: #22c55e;
  --btn-success-active: #16a34a;
  --btn-success-text: #f7fff9;

  --btn-outline-bg-hover: #f8fafc;
  --btn-outline-border: #dbe4ee;
  --btn-outline-text: #475569;

  --btn-subtle-bg: rgba(96, 165, 250, 0.16);
  --btn-subtle-hover: rgba(96, 165, 250, 0.24);
  --btn-subtle-text: #1d4ed8;

  /* Borders & dividers */
  --app-border: rgba(15, 23, 42, 0.08);
  --app-border-strong: rgba(15, 23, 42, 0.12);
  --app-divider: rgba(15, 23, 42, 0.06);

  /* Shadows */
  --app-shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.05);
  --app-shadow-sm: 0 4px 12px rgba(15, 23, 42, 0.06);
  --app-shadow-md: 0 8px 28px rgba(15, 23, 42, 0.08);
  --app-shadow-lg: 0 16px 48px rgba(15, 23, 42, 0.1);

  /* Radius */
  --app-radius-sm: 0.5rem;
  --app-radius-md: 0.75rem;
  --app-radius-lg: 1rem;
  --app-radius-pill: 9999px;

  /* Layout rhythm */
  --app-section-y: clamp(2.5rem, 5vw, 4rem);
  --app-container-narrow: 42rem;

  /* Hero (overridable per section) */
  --hero-gradient-start: #0f172a;
  --hero-gradient-mid: #1e3a5f;
  --hero-gradient-end: #0c4a6e;
  --hero-overlay-top: rgba(15, 23, 42, 0.45);
  --hero-overlay-mid: rgba(15, 23, 42, 0.5);
  --hero-overlay-bottom: rgba(15, 23, 42, 0.72);
  --hero-brand-panel-bg: rgba(255, 255, 255, 0.12);
  --hero-brand-panel-border: rgba(255, 255, 255, 0.22);
  --hero-brand-panel-hover: rgba(255, 255, 255, 0.2);
  --hero-search-surface: var(--app-surface);
  --hero-search-shadow: var(--app-shadow-md);

  /* Focus (accessibility) */
  --app-focus-ring: 0 0 0 3px var(--app-accent-ring);

  /* Bootstrap bridge */
  --bs-primary: var(--btn-primary-bg);
  --bs-primary-rgb: 96, 165, 250;
  --bs-secondary: #64748b;
  --bs-secondary-rgb: 100, 116, 139;
  --bs-success: var(--btn-success-bg);
  --bs-success-rgb: 74, 222, 128;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  min-height: 100vh;
  background-color: var(--app-bg);
  color: var(--app-text);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a {
  color: var(--app-accent);
  text-underline-offset: 0.15em;
}

a:hover {
  color: var(--app-accent-hover);
}

:focus:not(:focus-visible) {
  outline: none;
}

:focus-visible {
  outline: 2px solid var(--app-accent);
  outline-offset: 2px;
}