/* 02-base.css
 * Base element styling + typography baseline.
 * Institutional: calm defaults, readable measure, strong focus visibility.
 */

html{
  color-scheme: light;
}

body{
  font-family: var(--font-sans);
  line-height: var(--lh);
  background: var(--c-bg);
  color: var(--c-text);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Links */
a{
  color: var(--c-link);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}

a:hover{
  color: var(--c-link-hover);
}

/* Focus */
:focus-visible{
  outline: 3px solid var(--c-focus);
  outline-offset: 3px;
  border-radius: var(--r-xs);
}

/* Headings */
h1, h2, h3{
  line-height: 1.2;
  letter-spacing: -0.01em;
}

h1{ font-size: clamp(1.8rem, 2.6vw, 2.35rem); margin: 0 0 var(--s-3); }
h2{ font-size: clamp(1.25rem, 1.6vw, 1.5rem); margin: var(--s-6) 0 var(--s-2); }
h3{ font-size: 1.1rem; margin: var(--s-5) 0 var(--s-2); }

p{
  margin: 0 0 var(--s-4);
  max-width: var(--measure);
}

ul, ol{
  margin: 0 0 var(--s-4);
  max-width: var(--measure);
}

li{
  margin: 0 0 var(--s-2);
}

/* Small helpers */
.muted{ color: var(--c-muted); }

/* Forms */
label{
  display: inline-block;
  margin: 0 0 var(--s-2);
  color: var(--c-text);
}

input[type="text"],
input[type="email"],
input[type="tel"],
textarea,
select{
  width: 100%;
  border: 1px solid var(--c-border);
  background: var(--c-surface);
  border-radius: var(--r-sm);
  padding: 0.75rem 0.85rem;
  line-height: 1.4;
}

textarea{
  min-height: 140px;
  resize: vertical;
}

input::placeholder,
textarea::placeholder{
  color: color-mix(in srgb, var(--c-muted) 70%, transparent);
}

/* --------------------------------------------------------------------------
   Global spacing normalization (site-wide)
   Prevent “mystery gaps” when content starts with a heading/list/paragraph.
   -------------------------------------------------------------------------- */

:where(main, section, article, header, footer, .container, .page-body, .card, .panel, .calm-panel) > :first-child{
  margin-top: 0;
}

:where(main, section, article, header, footer, .container, .page-body, .card, .panel, .calm-panel) > :last-child{
  margin-bottom: 0;
}

/* Reduce motion */
@media (prefers-reduced-motion: reduce){
  *{
    scroll-behavior: auto !important;
    transition-duration: 0.001ms !important;
    animation-duration: 0.001ms !important;
  }
}