/* =========================================================================
   base.css
   Layer: Foundation (reset, design tokens, typography)

   ARCHITECTURAL NOTE:
   This is the only file that defines --custom-properties (design tokens).
   Every other CSS layer (layout, components, pages) consumes these tokens
   rather than hard-coded values. This means a full rebrand (new palette,
   new type scale) is a one-file change — critical for a consulting brand
   that may iterate on visual identity independently of content.
   ========================================================================= */

/* -------------------------------------------------------------------------
   1. Design Tokens
   Centralizing color/spacing/type here avoids "magic numbers" scattered
   across component files, which is the #1 cause of visual drift at scale.
   ------------------------------------------------------------------------- */
:root {
  /* Brand palette: deep blues/greens signal trust + intelligence per the
     brand guidelines (Strategic Architect persona). */
  --color-primary: #0b2545;      /* deep blue   - headers, primary actions */
  --color-primary-dark: #071a33;
  --color-secondary: #0f5257;    /* deep green  - accents, secondary actions */
  --color-accent: #d4af37;       /* muted gold  - sparing use, CTAs/highlights */

  --color-bg: #ffffff;
  --color-surface: #f5f7fa;      /* card/section backgrounds */
  --color-border: #dfe4ea;

  --color-text: #1a1f24;
  --color-text-muted: #5a6472;
  --color-text-inverse: #ffffff;

  /* Type scale: a modular scale (1.25 ratio) keeps heading hierarchy
     consistent without hand-tuning every breakpoint. clamp() gives fluid
     sizing so we don't need a media query per heading level. */
  --font-family-base: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    Helvetica, Arial, sans-serif;
  --font-size-base: 1rem;
  --font-size-sm: 0.875rem;
  --font-size-h1: clamp(2rem, 1.4rem + 2.5vw, 3.5rem);
  --font-size-h2: clamp(1.5rem, 1.2rem + 1.5vw, 2.25rem);
  --font-size-h3: clamp(1.25rem, 1.1rem + 0.75vw, 1.5rem);
  --line-height-base: 1.6;
  --line-height-tight: 1.2;

  /* Spacing scale: 8px base unit. Using a scale (not arbitrary px values)
     keeps vertical rhythm consistent across every section. */
  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2rem;
  --space-5: 3rem;
  --space-6: 4.5rem;

  --radius-base: 6px;
  --shadow-base: 0 2px 8px rgba(11, 37, 69, 0.08);
  --shadow-elevated: 0 8px 24px rgba(11, 37, 69, 0.12);

  --max-width-content: 1180px;

  --transition-base: 150ms ease-in-out;
}

/* -------------------------------------------------------------------------
   2. Reset
   A minimal, modern reset (not a full Normalize.css) — we only neutralize
   the properties that reliably differ across browsers and that our
   components override anyway, keeping the CSS payload small.
   ------------------------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box; /* predictable sizing: padding/border never blow out declared widths */
  margin: 0;
  padding: 0;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;

  /* Reserve scrollbar space unconditionally, on every page, regardless
     of whether that page's own content is tall enough to need scrolling.
     Without this, centered elements (e.g. the header logo inside
     .container, which uses margin-inline: auto) sit ~7-8px further right
     on short pages (no scrollbar) than on tall pages (scrollbar present)
     — the vertical scrollbar's width eats into the available centering
     width on pages that have one. Found via a real bug: contact.html
     got shorter after its interactive form was replaced with static
     instructions, making it the one page short enough to not scroll at
     common viewport heights, which visibly shifted its header logo
     relative to every other (still-scrolling) page.
     overflow-y: scroll is the universal fallback (always shows a
     scrollbar track); browsers supporting scrollbar-gutter get the
     newer behavior instead (space reserved without necessarily showing
     a visible track when content fits). */
  overflow-y: scroll;
}

@supports (scrollbar-gutter: stable) {
  html {
    overflow-y: auto;
    scrollbar-gutter: stable;
  }
}

body {
  font-family: var(--font-family-base);
  font-size: var(--font-size-base);
  line-height: var(--line-height-base);
  color: var(--color-text);
  background-color: var(--color-bg);
  min-height: 100vh;
}

img,
picture,
svg {
  max-width: 100%;
  display: block; /* removes inline-image baseline gap without needing vertical-align hacks */
}

a {
  color: inherit;
  text-decoration: none;
}

ul,
ol {
  list-style: none;
}

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

/* Respect user motion preferences — accessibility requirement, not optional polish. */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* -------------------------------------------------------------------------
   3. Base Typography
   ------------------------------------------------------------------------- */
h1,
h2,
h3,
h4 {
  line-height: var(--line-height-tight);
  color: var(--color-primary);
  font-weight: 700;
}

h1 {
  font-size: var(--font-size-h1);
}

h2 {
  font-size: var(--font-size-h2);
}

h3 {
  font-size: var(--font-size-h3);
}

p {
  margin-bottom: var(--space-2);
}

/* Utility: visually hides content while keeping it in the accessibility
   tree (e.g. skip links, form labels for icon-only inputs). Using this
   over display:none preserves screen-reader access — a WCAG requirement
   called out in the proposal's SEO/accessibility notes. */
.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;
}