:root {
  
  --surface-base: #ffffff;
  --surface-raised: #f7f9fa;
  --surface-deep: #1d242a;
  --surface-deeper: #151b20;
  --surface-mint: #dcefe9;
  --surface-sand: #f4ece0;
  --surface-sky: #dfe6e9;
  --surface-clay: #fab1a0;

  
  --text-primary: #23292e;
  --text-muted: #5c6770;
  --text-invert: #eef3f4;
  --text-invert-muted: #a9b7bb;

  
  --action-primary: #0f6f72;
  --action-hover: #0a5052;
  --action-invert: #57b9ad;
  --action-quiet: #8a949b;

  
  --signal-save: #9a3f1f;
  --signal-note: #b4532c;

  
  --line-subtle: #d9dee2;
  --line-invert: rgba(238, 243, 244, 0.16);
  --focus-ring: #57b9ad;

  
  --space-xs: 0.375rem;
  --space-sm: 0.625rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2rem;
  --space-2xl: 3rem;

  --radius-soft: 10px;
  --radius-card: 16px;
  --radius-pill: 999px;

  --motion-base: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  --motion-quick: 0.2s ease;

  --shell-width: 1180px;
}

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

body {
  margin: 0;
  font-family: 'Roboto', 'Segoe UI', sans-serif;
  font-weight: 400;
  line-height: 1.7;
  font-size: 1rem;
  color: var(--text-primary);
  background: var(--surface-base);
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Oswald', 'Roboto Condensed', sans-serif;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  margin: 0 0 var(--space-md);
  color: inherit;
}

h1 {
  font-size: clamp(2.2rem, 7.5vw, 3.8rem);
  line-height: 1.12;
}

h2 {
  font-size: clamp(1.5rem, 4.4vw, 2.1rem);
  line-height: 1.2;
}

h3 {
  font-size: 1.4rem;
  line-height: 1.3;
}

p {
  font-size: 1rem;
  line-height: 1.7;
  margin: 0 0 var(--space-sm);
}

a {
  color: var(--action-primary);
  transition: color var(--motion-quick);
}

a:hover {
  color: var(--action-hover);
}

img,
svg {
  max-width: 100%;
}

img {
  height: auto;
}

:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 2px;
}