/* ==========================================================================
   Bold Seal — base.css
   Reset, CSS custom properties (palette/type/spacing/radii/shadows),
   and base element styles. Loaded first on every page.
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. Custom properties
   -------------------------------------------------------------------------- */

:root {
  /* ---- Brand palette (role-named; locked in Chat 1a) -------------------- */
  --bs-color-primary:   #d98c12;  /* orange — CTAs, accents, brand energy    */
  --bs-color-secondary: #125fd9;  /* blue — trust, link underlines           */
  --bs-color-accent:    #12c2d9;  /* cyan — hover states, highlights         */
  --bs-color-ink:       #1a1a1a;  /* body text on light backgrounds          */

  /* Derived brand tints — used for CTA hover/active. Pre-computed rather */
  /* than calc(rgb) so we can hand-tune without relative-color-syntax support. */
  --bs-color-primary-hover:   #c07a0a;  /* ~8% darker, slightly more saturated */
  --bs-color-primary-active:  #a56805;
  --bs-color-secondary-hover: #0f4fb8;

  /* ---- Neutral scale (anchored on #7a7a7a from planning doc) ----------- */
  /* Gapped numeric scale (50/100/200/400/500/700/900) mirrors Tailwind so  */
  /* any dev reading the code knows what "500" means at a glance. Gaps let */
  /* us insert 300 or 600 later without renumbering.                        */
  --bs-color-neutral-50:  #f5f5f5;
  --bs-color-neutral-100: #e8e8e8;
  --bs-color-neutral-200: #d1d1d1;
  --bs-color-neutral-400: #a3a3a3;
  --bs-color-neutral-500: #7a7a7a;  /* ← anchor: seal-mascot body gray      */
  --bs-color-neutral-700: #525252;
  --bs-color-neutral-900: #1a1a1a;  /* same as --bs-color-ink (intentional) */

  /* ---- Surface aliases (semantic hooks; remapped per section) ---------- */
  --bs-surface-page:   #ffffff;
  --bs-surface-raised: var(--bs-color-neutral-50);
  --bs-surface-footer: var(--bs-color-neutral-900);

  /* ---- Text aliases ---------------------------------------------------- */
  --bs-text-body:    var(--bs-color-ink);
  --bs-text-muted:   var(--bs-color-neutral-700);
  --bs-text-subtle:  var(--bs-color-neutral-500);
  --bs-text-inverse: #ffffff;

  /* ---- Borders --------------------------------------------------------- */
  --bs-border-subtle: var(--bs-color-neutral-200);
  --bs-border-strong: var(--bs-color-neutral-400);

  /* ---- Type scale (modular, mobile-first) ------------------------------ */
  --bs-font-family-sans:    system-ui, -apple-system, "Segoe UI", Roboto,
                            "Helvetica Neue", Arial, sans-serif;
  --bs-font-family-display: var(--bs-font-family-sans);  /* placeholder; revisit with Brandon */

  --bs-font-size-xs:   0.8125rem;  /* 13px */
  --bs-font-size-sm:   0.9375rem;  /* 15px */
  --bs-font-size-base: 1rem;       /* 16px — body default */
  --bs-font-size-lg:   1.125rem;
  --bs-font-size-xl:   1.375rem;
  --bs-font-size-2xl:  1.75rem;
  --bs-font-size-3xl:  2.25rem;
  --bs-font-size-4xl:  2.75rem;    /* hero headline, mobile */

  --bs-font-weight-regular: 400;
  --bs-font-weight-medium:  500;
  --bs-font-weight-bold:    700;
  --bs-font-weight-black:   900;

  --bs-line-height-tight: 1.15;
  --bs-line-height-snug:  1.35;
  --bs-line-height-base:  1.6;

  /* ---- Spacing scale (4px base unit) ----------------------------------- */
  --bs-space-1:  0.25rem;
  --bs-space-2:  0.5rem;
  --bs-space-3:  0.75rem;
  --bs-space-4:  1rem;
  --bs-space-6:  1.5rem;
  --bs-space-8:  2rem;
  --bs-space-12: 3rem;
  --bs-space-16: 4rem;
  --bs-space-24: 6rem;

  /* ---- Radii ----------------------------------------------------------- */
  --bs-radius-sm:   4px;
  --bs-radius-md:   8px;
  --bs-radius-lg:   16px;
  --bs-radius-full: 9999px;

  /* ---- Shadows (layered for depth) ------------------------------------- */
  --bs-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.06),
                  0 1px 3px rgba(0, 0, 0, 0.08);
  --bs-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08),
                  0 2px 4px  rgba(0, 0, 0, 0.06);
  --bs-shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.12),
                  0 4px 8px   rgba(0, 0, 0, 0.06);

  /* ---- Motion ---------------------------------------------------------- */
  --bs-transition-fast: 150ms ease;
  --bs-transition-base: 250ms ease;

  /* ---- Layout ---------------------------------------------------------- */
  --bs-container-max:    1200px;
  --bs-container-pad:    var(--bs-space-4);
  --bs-header-height:    64px;

  /* Focus-ring — used on every interactive element via :focus-visible */
  --bs-focus-ring: 0 0 0 3px rgba(18, 95, 217, 0.45);  /* secondary @ 45% */
}

/* Tablet-up type bumps. Body stays 16px (never touch that — users rely on */
/* browser font-size for accessibility); display sizes scale up.           */
@media (min-width: 640px) {
  :root {
    --bs-font-size-3xl: 2.5rem;
    --bs-font-size-4xl: 3.25rem;
  }
}

@media (min-width: 1024px) {
  :root {
    --bs-font-size-3xl: 2.75rem;
    --bs-font-size-4xl: 3.75rem;  /* hero headline, desktop */
    --bs-container-pad: var(--bs-space-8);
  }
}


/* --------------------------------------------------------------------------
   2. Modern reset (minimal — only what we actually need)
   -------------------------------------------------------------------------- */

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

html {
  /* Prevent iOS text size bump on orientation change without disabling */
  /* user zoom (never set user-scalable=no — it's an a11y violation).   */
  -webkit-text-size-adjust: 100%;
  /* Smooth anchor scrolling, but only for users who haven't opted out. */
  scroll-behavior: smooth;
}

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

body {
  margin: 0;
  min-height: 100dvh;     /* dvh handles mobile URL bar correctly */
  font-family: var(--bs-font-family-sans);
  font-size: var(--bs-font-size-base);
  line-height: var(--bs-line-height-base);
  color: var(--bs-text-body);
  background: var(--bs-surface-page);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* Reset margins on block text elements; we control spacing with utilities. */
h1, h2, h3, h4, h5, h6,
p, figure, blockquote, dl, dd {
  margin: 0;
}

ul, ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

img, picture, video, canvas, svg {
  display: block;
  max-width: 100%;
  height: auto;      /* keeps aspect ratio when width is constrained */
}

/* When width+height attrs are set on <img>, keep them respected so CLS stays 0 */
img[width][height] {
  height: auto;
}

button, input, select, textarea {
  font: inherit;
  color: inherit;
}

button {
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}

a {
  color: var(--bs-color-secondary);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
  transition: color var(--bs-transition-fast);
}

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


/* --------------------------------------------------------------------------
   3. Base typography
   -------------------------------------------------------------------------- */

h1, h2, h3, h4 {
  font-family: var(--bs-font-family-display);
  font-weight: var(--bs-font-weight-bold);
  line-height: var(--bs-line-height-tight);
  color: var(--bs-text-body);
  /* Tighter letter-spacing on large display type reads more intentional. */
  letter-spacing: -0.01em;
}

h1 {
  font-size: var(--bs-font-size-4xl);
  font-weight: var(--bs-font-weight-black);
  letter-spacing: -0.02em;
}

h2 { font-size: var(--bs-font-size-3xl); }
h3 { font-size: var(--bs-font-size-2xl); }
h4 { font-size: var(--bs-font-size-xl); }

p { line-height: var(--bs-line-height-base); }

strong, b { font-weight: var(--bs-font-weight-bold); }

small { font-size: var(--bs-font-size-sm); color: var(--bs-text-muted); }

hr {
  border: 0;
  border-top: 1px solid var(--bs-border-subtle);
  margin: var(--bs-space-8) 0;
}


/* --------------------------------------------------------------------------
   4. Focus, selection, accessibility utilities
   -------------------------------------------------------------------------- */

:focus { outline: 0; }

:focus-visible {
  outline: 0;
  box-shadow: var(--bs-focus-ring);
  border-radius: var(--bs-radius-sm);
}

::selection {
  background: var(--bs-color-primary);
  color: #ffffff;
}

/* Visually-hidden: accessible to screen readers, invisible to sighted users. */
/* Used for skip link, form labels that are visually replaced by placeholders, etc. */
.bs-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Skip link — first focusable element on every page. Jumps to <main id="main"> */
/* for keyboard users so they don't tab through the whole header.               */
.bs-skip-link {
  position: absolute;
  top: 0;
  left: 0;
  padding: var(--bs-space-3) var(--bs-space-4);
  background: var(--bs-color-ink);
  color: var(--bs-text-inverse);
  text-decoration: none;
  font-weight: var(--bs-font-weight-bold);
  transform: translateY(-100%);
  transition: transform var(--bs-transition-fast);
  z-index: 1000;
}

.bs-skip-link:focus,
.bs-skip-link:focus-visible {
  transform: translateY(0);
  color: var(--bs-text-inverse);
}


/* --------------------------------------------------------------------------
   5. Reduced-motion — respect user preference globally
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}