/* ============================================================
   Design Tokens
   All component CSS references these tokens — no literal
   design values outside this block.
   ============================================================ */

:root {
  /* Color — light mode (default) */
  --color-background:      #ffffff;
  --color-surface:         #f7f7f8;  /* reserved — not used in Phase 1 layout */
  --color-text-primary:    #1a1a1a;
  --color-text-secondary:  #555555;
  --color-text-tertiary:   #767676;
  --color-accent:          #0060cc;
  --color-border:          #e0e0e0;

  /* Spacing — 8pt grid */
  --spacing-xs:  0.25rem;   /*  4px */
  --spacing-sm:  0.5rem;    /*  8px */
  --spacing-md:  1rem;      /* 16px */
  --spacing-lg:  1.5rem;    /* 24px */
  --spacing-xl:  2rem;      /* 32px */
  --spacing-xxl: 3rem;      /* 48px */

  /* Typography */
  --font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
                 "Helvetica Neue", Arial, sans-serif;
  --font-size-sm:           0.875rem;
  --font-size-base:         1rem;
  --font-size-lg:           1.125rem;
  --font-size-xl:           1.25rem;
  --font-size-h1:           clamp(1.75rem, 4vw, 2.5rem);
  --font-weight-regular:    400;
  --font-weight-medium:     500;
  --font-weight-semibold:   600;
  --line-height-body:       1.5;
  --line-height-heading:    1.2;
  --wordmark-letter-spacing: -0.01em;

  /* Layout */
  --site-max-width:  1280px;
  --prose-max-width: 65ch;
  --site-padding-x:  var(--spacing-md);

  /* Logo — mobile-first; --logo-size derived from wordmark at 1.0 ratio */
  --font-size-wordmark: 1.5rem;                                /* 24px mobile */
  --logo-size:          calc(var(--font-size-wordmark) * 1.0); /* 24px mobile */

  /* Focus indicator */
  --focus-outline-color:  var(--color-accent);
  --focus-outline-width:  2px;
  --focus-outline-offset: 4px;
  --focus-border-radius:  4px;

  /* Color scheme — instructs browser-native elements (scrollbar, selection)
     to render in the active scheme rather than defaulting to light. */
  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  :root {
    --color-background:     #121212;
    --color-surface:        #1e1e1e;  /* reserved — not used in Phase 1 layout */
    --color-text-primary:   #f0f0f0;
    --color-text-secondary: #a0a0a0;
    --color-text-tertiary:  #8f8f8f;
    --color-border:         #333333;
    /* Dark-mode accent override: #0060cc achieves only ~3.5:1 on #121212
       (fails WCAG AA for text). #58a6ff achieves ~7.6:1 — passes AA. */
    --color-accent:         #58a6ff;
  }
}

/* ============================================================
   Base Reset
   ============================================================ */

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

html {
  scroll-behavior: smooth;
}

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

body {
  margin: 0;
  background-color: var(--color-background);
  color: var(--color-text-primary);
  font-family: var(--font-family);
  font-size: var(--font-size-base);
  line-height: var(--line-height-body);
  overflow-wrap: break-word;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  display: flex;
  flex-direction: column;
  min-height: 100dvh;
}

/* ============================================================
   Skip Navigation
   Visually hidden until focused — satisfies WCAG 2.4.1 (Level A)
   for keyboard-only users who cannot use landmark navigation.
   ============================================================ */

.skip-link {
  position: absolute;
  top: -100%;
  left: var(--site-padding-x);
  padding: var(--spacing-sm) var(--spacing-md);
  background-color: var(--color-background);
  color: var(--color-accent);
  font-weight: var(--font-weight-semibold);
  text-decoration: none;
  border-radius: var(--focus-border-radius);
  z-index: 100;
}

.skip-link:focus {
  top: var(--spacing-sm);
}

/* ============================================================
   Site Layout
   ============================================================ */

header {
  width: 100%;
  max-width: var(--site-max-width);
  margin: 0 auto;
  padding: var(--spacing-md) var(--site-padding-x);
  display: flex;
  align-items: center;
}

main {
  max-width: var(--prose-max-width);
  margin: 0 auto;
  padding: var(--spacing-xxl) var(--site-padding-x);
  flex: 1;
}

footer {
  max-width: var(--site-max-width);
  margin: 0 auto;
  padding: var(--spacing-lg) var(--site-padding-x);
}

/* ============================================================
   Header
   ============================================================ */

header a {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-sm);
  min-height: 2.75rem;                      /* 44px — HIG minimum touch target */
  text-decoration: none;
  color: var(--color-text-primary);
  border-radius: var(--focus-border-radius);
  -webkit-tap-highlight-color: transparent; /* suppress iOS default tap overlay */
}

header a:focus-visible {
  outline: var(--focus-outline-width) solid var(--focus-outline-color);
  outline-offset: var(--focus-outline-offset);
}

header img {
  display: block;
  width: var(--logo-size);
  height: var(--logo-size);
  flex-shrink: 0;
}

.wordmark {
  font-size: var(--font-size-wordmark);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--wordmark-letter-spacing);
  color: var(--color-text-primary);
}

/* ============================================================
   Hero Section
   ============================================================ */

.hero {
  margin-bottom: var(--spacing-xxl);
}

h1 {
  font-size: var(--font-size-h1);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-heading);
  margin: 0 0 var(--spacing-sm) 0;
  color: var(--color-text-primary);
}

h1 .clause {
  display: block;
}

.lead {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-regular);
  color: var(--color-text-secondary);
  margin: 0;
}

/* ============================================================
   Links
   ============================================================ */

a {
  color: var(--color-accent);
  text-decoration: underline;
}

a:focus-visible {
  outline: var(--focus-outline-width) solid var(--focus-outline-color);
  outline-offset: var(--focus-outline-offset);
  border-radius: var(--focus-border-radius);
}

/* ============================================================
   Body Content
   ============================================================ */

.body-content {
  color: var(--color-text-secondary);
}

.body-content p {
  margin: 0 0 var(--spacing-md) 0;
}

.body-content p:last-child {
  margin-bottom: 0;
}

/* ============================================================
   Footer
   ============================================================ */

footer p {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-regular);
  color: var(--color-text-tertiary);
  margin: 0;
  text-align: center;
}

/* ============================================================
   Responsive Adjustments — mobile-first
   Breakpoints: 480px, 768px, 1024px
   ============================================================ */

@media (min-width: 480px) {
  :root {
    --site-padding-x: var(--spacing-lg);
  }
}

@media (min-width: 768px) {
  :root {
    --site-padding-x:     var(--spacing-xl);
    --font-size-wordmark: 1.75rem;
  }

  header {
    padding: var(--spacing-lg) var(--site-padding-x);
  }
}

@media (min-width: 1024px) {
  :root {
    --site-padding-x: var(--spacing-xxl);
  }
}