/* ==========================================================================
   Base CSS - Reset, Custom Properties, Typography
   ========================================================================== */

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

* {
  margin: 0;
  padding: 0;
}

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

body {
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img, picture, video, canvas, svg {
  display: block;
  max-width: 100%;
}

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

p, h1, h2, h3, h4, h5, h6 {
  overflow-wrap: break-word;
}

/* --------------------------------------------------------------------------
   Custom Properties
   -------------------------------------------------------------------------- */
:root {
  /* Colors - Precision Craft Palette */
  --color-primary: #1a2f23;
  --color-primary-light: #2a4a38;
  --color-primary-dark: #0f1c15;

  --color-background: #f5f2eb;
  --color-background-alt: #ebe7dd;
  --color-surface: #ffffff;

  --color-accent: #c4703c;
  --color-accent-light: #d4875a;
  --color-accent-dark: #a55d2e;
  /* Accent for text on light ground: #c4703c is only about 3:1 on cream */
  --color-accent-text: #96522a;

  --color-text: #2d2d2d;
  --color-text-light: #5a5a5a;
  --color-text-muted: #666666;

  --color-border: #d4d0c6;
  --color-border-light: #e8e4da;

  /* Typography */
  --font-display: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --font-body: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'SF Mono', 'Fira Code', 'Consolas', monospace;

  /* Font Sizes - Fluid Scale */
  --text-xs: clamp(0.75rem, 0.7rem + 0.25vw, 0.875rem);
  --text-sm: clamp(0.875rem, 0.8rem + 0.35vw, 1rem);
  --text-base: clamp(1rem, 0.9rem + 0.5vw, 1.125rem);
  --text-lg: clamp(1.125rem, 1rem + 0.6vw, 1.25rem);
  --text-xl: clamp(1.25rem, 1.1rem + 0.75vw, 1.5rem);
  --text-2xl: clamp(1.5rem, 1.2rem + 1.5vw, 2rem);
  --text-3xl: clamp(2rem, 1.5rem + 2.5vw, 2.75rem);
  --text-4xl: clamp(2.5rem, 1.8rem + 3.5vw, 3.5rem);
  --text-5xl: clamp(3rem, 2rem + 5vw, 4.5rem);

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

  /* Spacing Scale */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;
  --space-32: 8rem;

  /* Layout */
  --container-max: 72rem;
  --container-narrow: 48rem;
  --container-wide: 90rem;

  /* Borders */
  --radius-sm: 0.25rem;
  --radius-md: 0.5rem;
  --radius-lg: 1rem;
  --radius-xl: 1.5rem;
  --radius-full: 9999px;

  /* Shadows */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);

  /* Transitions */
  --ease-out: cubic-bezier(0.33, 1, 0.68, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

  --duration-fast: 150ms;
  --duration-normal: 250ms;
  --duration-slow: 400ms;
  --duration-slower: 600ms;

  /* Z-index Scale */
  --z-base: 0;
  --z-above: 10;
  --z-sticky: 100;
  --z-fixed: 200;
  --z-modal-backdrop: 900;
  --z-modal: 1000;
  --z-tooltip: 1100;
}

/* Reduced Motion */
@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-fast: 0ms;
    --duration-normal: 0ms;
    --duration-slow: 0ms;
    --duration-slower: 0ms;
  }

  html {
    scroll-behavior: auto;
  }

  /* Zero, not 0.01ms: transition-property defaults to "all", so any nonzero
     duration here makes every property on every element transition. Opening
     the wizard flips its inherited visibility, and WebKit held the resulting
     visibility transitions at "hidden": a blank result with Reduce Motion on.
     A zero-length transition is never created. Nothing listens for
     transitionend.
     Animations are switched off rather than shortened: a 0.01ms animation
     still runs until the next frame, so on a busy device the wizard's next
     step could be caught mid-fade. None of them hold an end state, and
     nothing listens for animationend. */
  *, *::before, *::after {
    animation: none !important;
    transition-duration: 0s !important;
    transition-delay: 0s !important;
  }
}

/* --------------------------------------------------------------------------
   Base Styles
   -------------------------------------------------------------------------- */
body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  color: var(--color-text);
  background-color: var(--color-background);
  min-height: 100vh;
}

/* Paper texture overlay - lower z-index to not interfere with interactions */
body::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: 0.02;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
  z-index: -1;
}

/* --------------------------------------------------------------------------
   Typography
   -------------------------------------------------------------------------- */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  line-height: 1.2;
  color: var(--color-primary);
  letter-spacing: -0.02em;
}

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

/* Keep a heading's size when its level is set by the document outline */
.h4 { font-size: var(--text-2xl); }
.h5 { font-size: var(--text-xl); }
h6 { font-size: var(--text-lg); }

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

p:last-child {
  margin-bottom: 0;
}

a {
  color: var(--color-accent-text);
  text-decoration: none;
  transition: color var(--duration-fast) var(--ease-out);
}

a:not(.btn):hover {
  color: var(--color-primary);
  text-decoration: underline;
}

/* Links inside running text need more than colour to stand out from it */
p a:not(.btn),
li a:not(.btn),
td a:not(.btn) {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.15em;
}

a:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

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

em, i {
  font-style: italic;
}

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

/* Lead paragraph */
.lead {
  font-size: var(--text-xl);
  color: var(--color-text-light);
  line-height: 1.5;
}

/* Decorative rule */
hr {
  border: none;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    var(--color-border) 20%,
    var(--color-border) 80%,
    transparent
  );
  margin: var(--space-8) 0;
}

/* Selection */
::selection {
  background-color: var(--color-accent);
  color: var(--color-surface);
}

/* Lists */
ul, ol {
  padding-left: var(--space-6);
  margin-bottom: var(--space-4);
}

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

li:last-child {
  margin-bottom: 0;
}

/* Blockquote */
blockquote {
  border-left: 3px solid var(--color-accent);
  padding-left: var(--space-6);
  margin: var(--space-6) 0;
  font-style: italic;
  color: var(--color-text-light);
}

/* Code */
code {
  font-family: var(--font-mono);
  font-size: 0.9em;
  background-color: var(--color-background-alt);
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-sm);
}

pre {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  background-color: var(--color-primary);
  color: var(--color-background);
  padding: var(--space-6);
  border-radius: var(--radius-md);
  overflow-x: auto;
  margin: var(--space-6) 0;
}

pre code {
  background: none;
  padding: 0;
  font-size: inherit;
}

/* --------------------------------------------------------------------------
   Focus Styles
   -------------------------------------------------------------------------- */
:focus {
  outline: none;
}

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

/* --------------------------------------------------------------------------
   Scrollbar Styling
   -------------------------------------------------------------------------- */
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

::-webkit-scrollbar-track {
  background: var(--color-background-alt);
}

::-webkit-scrollbar-thumb {
  background: var(--color-border);
  border-radius: var(--radius-full);
  border: 2px solid var(--color-background-alt);
}

::-webkit-scrollbar-thumb:hover {
  background: var(--color-text-muted);
}

/* Firefox */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--color-border) var(--color-background-alt);
}

/* --------------------------------------------------------------------------
   Layout Utilities
   -------------------------------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--space-6);
}

.container--narrow {
  max-width: var(--container-narrow);
}

.container--wide {
  max-width: var(--container-wide);
}

/* Screen reader only */
.sr-only {
  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 */
.skip-link {
  position: absolute;
  top: -100%;
  left: var(--space-4);
  z-index: var(--z-tooltip);
  padding: var(--space-3) var(--space-4);
  background: var(--color-primary);
  color: var(--color-background);
  border-radius: var(--radius-md);
  font-weight: var(--weight-medium);
  transition: top var(--duration-fast) var(--ease-out);
}

.skip-link:focus {
  top: var(--space-4);
  outline: none;
}