/*
 * BigState Base — assets/css/base.css
 *
 * Layer 1: CSS custom properties (design tokens) + CSS reset + base typography.
 *
 * IMPORTANT: This file sets FALLBACK values for all custom properties.
 * The actual brand values are written into :root by inc/css-vars.php at
 * runtime, based on the child theme's Brand Settings. Any property not
 * set in Brand Settings falls back to the values here.
 *
 * Rule: No hardcoded colors, fonts, or brand values anywhere in the theme
 * except in this :root block. Everything else references var(--bs-*).
 */

/* ── 1. Design tokens ─────────────────────────────────────────────────────── */

:root {

  /* Colors — overridden by inc/css-vars.php from Brand Settings */
  --bs-color-primary:    #1a3a5c;
  --bs-color-secondary:  #2e6da4;
  --bs-color-accent:     #e8821b;
  --bs-color-bg-light:   #ffffff;
  --bs-color-bg-dark:    #0f1f2e;
  --bs-color-bg-subtle:  #f5f7fa;    /* Off-white for alternating sections */
  --bs-color-text:       #1a1a1a;
  --bs-color-text-muted: #6b7280;
  --bs-color-text-on-dark: #ffffff;  /* Text color on dark backgrounds */
  --bs-color-border:     #e0e4ea;
  --bs-color-focus:      #2e6da4;    /* Focus ring — visible on all backgrounds */

  /* Derived color states (don't override these in Brand Settings) */
  --bs-color-primary-hover:   color-mix(in srgb, var(--bs-color-primary) 85%, black);
  --bs-color-secondary-hover: color-mix(in srgb, var(--bs-color-secondary) 85%, black);
  --bs-color-accent-hover:    color-mix(in srgb, var(--bs-color-accent) 85%, black);

  /* Typography — overridden by inc/css-vars.php */
  --bs-font-heading:    'Montserrat', 'Segoe UI', system-ui, sans-serif;
  --bs-font-body:       'Open Sans', 'Segoe UI', system-ui, sans-serif;
  --bs-font-mono:       'Courier New', Courier, monospace;
  --bs-font-size-base:  16px;

  /* Type scale (ratio 1.25 — Major Third) */
  --bs-text-xs:   0.75rem;    /* 12px */
  --bs-text-sm:   0.875rem;   /* 14px */
  --bs-text-base: 1rem;       /* 16px */
  --bs-text-lg:   1.125rem;   /* 18px */
  --bs-text-xl:   1.25rem;    /* 20px */
  --bs-text-2xl:  1.5rem;     /* 24px */
  --bs-text-3xl:  1.875rem;   /* 30px */
  --bs-text-4xl:  2.25rem;    /* 36px */
  --bs-text-5xl:  3rem;       /* 48px */
  --bs-text-6xl:  3.75rem;    /* 60px */

  /* Line heights */
  --bs-leading-tight:  1.2;
  --bs-leading-snug:   1.35;
  --bs-leading-normal: 1.6;
  --bs-leading-loose:  1.8;

  /* Font weights */
  --bs-weight-normal:    400;
  --bs-weight-medium:    500;
  --bs-weight-semibold:  600;
  --bs-weight-bold:      700;

  /* Spacing scale — 8px base */
  --bs-space-1:   8px;
  --bs-space-2:   16px;
  --bs-space-3:   24px;
  --bs-space-4:   32px;
  --bs-space-5:   40px;
  --bs-space-6:   48px;
  --bs-space-8:   64px;
  --bs-space-10:  80px;
  --bs-space-12:  96px;
  --bs-space-16:  128px;
  --bs-space-20:  160px;

  /* Layout */
  --bs-container-max:   1280px;
  --bs-container-pad:   var(--bs-space-3);  /* Horizontal padding on small screens */
  --bs-content-max:     780px;              /* Max width for prose/single posts */

  /* Grid */
  --bs-grid-cols:  12;
  --bs-grid-gap:   var(--bs-space-3);

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

  /* Shadows */
  --bs-shadow-sm:  0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.05);
  --bs-shadow-md:  0 4px 12px rgba(0,0,0,.10), 0 2px 4px rgba(0,0,0,.06);
  --bs-shadow-lg:  0 10px 30px rgba(0,0,0,.12), 0 4px 8px rgba(0,0,0,.06);
  --bs-shadow-xl:  0 20px 50px rgba(0,0,0,.14);

  /* Transitions */
  --bs-transition-fast:   150ms ease;
  --bs-transition-base:   250ms ease;
  --bs-transition-slow:   350ms ease;

  /* Z-index ladder */
  --bs-z-below:    -1;
  --bs-z-base:      0;
  --bs-z-raised:   10;
  --bs-z-dropdown: 100;
  --bs-z-sticky:   200;
  --bs-z-overlay:  300;
  --bs-z-modal:    400;
  --bs-z-toast:    500;

  /* Section spacing (vertical padding on page sections) */
  --bs-section-pad-sm:  var(--bs-space-8);
  --bs-section-pad-md:  var(--bs-space-10);
  --bs-section-pad-lg:  var(--bs-space-12);
}

/* Slightly larger base font on tablet+ */
@media (min-width: 768px) {
  :root {
    --bs-container-pad: var(--bs-space-4);
    --bs-grid-gap:      var(--bs-space-4);
  }
}

/* ── 2. CSS reset ─────────────────────────────────────────────────────────── */

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

html {
  font-size: var(--bs-font-size-base);
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  font-family: var(--bs-font-body);
  font-size: var(--bs-text-base);
  font-weight: var(--bs-weight-normal);
  line-height: var(--bs-leading-normal);
  color: var(--bs-color-text);
  background-color: var(--bs-color-bg-light);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img,
video,
svg {
  display: block;
  max-width: 100%;
  height: auto;
}

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

a {
  color: var(--bs-color-primary);
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color var(--bs-transition-fast);
}

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

p,
ul,
ol,
dl,
blockquote,
figure,
pre {
  margin-bottom: var(--bs-space-2);
}

ul,
ol {
  padding-left: var(--bs-space-3);
}

li {
  margin-bottom: var(--bs-space-1);
}

/* ── 3. Base typography ───────────────────────────────────────────────────── */

h1, h2, h3, h4, h5, h6 {
  font-family: var(--bs-font-heading);
  font-weight: var(--bs-weight-bold);
  line-height: var(--bs-leading-tight);
  color: var(--bs-color-text);
  margin-bottom: var(--bs-space-2);
}

h1 { font-size: var(--bs-text-5xl); }
h2 { font-size: var(--bs-text-4xl); }
h3 { font-size: var(--bs-text-3xl); }
h4 { font-size: var(--bs-text-2xl); }
h5 { font-size: var(--bs-text-xl);  }
h6 { font-size: var(--bs-text-lg);  }

/* Responsive heading sizes */
@media (max-width: 768px) {
  h1 { font-size: var(--bs-text-4xl); }
  h2 { font-size: var(--bs-text-3xl); }
  h3 { font-size: var(--bs-text-2xl); }
  h4 { font-size: var(--bs-text-xl);  }
}

@media (max-width: 480px) {
  h1 { font-size: var(--bs-text-3xl); }
  h2 { font-size: var(--bs-text-2xl); }
  h3 { font-size: var(--bs-text-xl);  }
}

/* Eyebrow text (small all-caps label above headings) */
.eyebrow {
  display: block;
  font-family: var(--bs-font-body);
  font-size: var(--bs-text-sm);
  font-weight: var(--bs-weight-semibold);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--bs-color-accent);
  margin-bottom: var(--bs-space-1);
}

/* Lead / intro paragraph */
.lead {
  font-size: var(--bs-text-xl);
  line-height: var(--bs-leading-loose);
  color: var(--bs-color-text-muted);
  max-width: 65ch;
}

blockquote {
  border-left: 4px solid var(--bs-color-primary);
  padding-left: var(--bs-space-3);
  font-style: italic;
  color: var(--bs-color-text-muted);
}

code {
  font-family: var(--bs-font-mono);
  font-size: 0.875em;
  background: var(--bs-color-bg-subtle);
  padding: 0.125em 0.375em;
  border-radius: var(--bs-radius-sm);
}

pre {
  background: var(--bs-color-bg-dark);
  color: var(--bs-color-text-on-dark);
  padding: var(--bs-space-3);
  border-radius: var(--bs-radius-md);
  overflow-x: auto;
}

pre code {
  background: transparent;
  padding: 0;
}

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

/* ── 4. Accessibility ─────────────────────────────────────────────────────── */

/* Visible focus ring for keyboard navigation */
:focus-visible {
  outline: 3px solid var(--bs-color-focus);
  outline-offset: 3px;
  border-radius: var(--bs-radius-sm);
}

/* Hide outline for mouse users */
:focus:not(:focus-visible) {
  outline: none;
}

/* Screen reader utility */
.screen-reader-text {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Skip link — becomes visible on focus for keyboard users */
.skip-link {
  position: fixed;
  top: var(--bs-space-2);
  left: var(--bs-space-2);
  z-index: var(--bs-z-toast);
  padding: var(--bs-space-1) var(--bs-space-2);
  background: var(--bs-color-primary);
  color: var(--bs-color-text-on-dark);
  border-radius: var(--bs-radius-md);
  text-decoration: none;
  font-weight: var(--bs-weight-semibold);
  transform: translateY(-150%);
  transition: transform var(--bs-transition-fast);
}

.skip-link:focus {
  transform: translateY(0);
}

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