/* base.css — reset + primitives for the Warm / human system.
   References tokens.css. Mobile-first. */

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

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

body {
  margin: 0;
  font-family: var(--font-family-body);
  font-size: var(--font-size-base);
  line-height: var(--line-height-normal);
  color: var(--color-text-primary);
  background: var(--color-bg-primary);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  transition: background var(--duration-normal) var(--easing-default),
              color var(--duration-normal) var(--easing-default);
}

h1, h2, h3 {
  font-family: var(--font-family-display);
  font-weight: var(--font-weight-semibold);
  font-variation-settings: var(--font-display-settings);
  line-height: var(--line-height-tight);
  letter-spacing: var(--letter-spacing-tight);
  margin: 0 0 var(--space-4);
  color: var(--color-text-primary);
}

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

a {
  color: var(--color-text-link);
  text-decoration-color: color-mix(in srgb, var(--color-text-link) 35%, transparent);
  text-underline-offset: 0.15em;
}
a:hover { text-decoration-color: currentColor; }

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

/* Focus — visible, warm, consistent */
:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus);
  border-radius: var(--border-radius-sm);
}

/* ---------- Form primitives ---------- */
input, textarea, select, button {
  font: inherit;
  color: inherit;
}

input[type="text"], input[type="email"], input[type="date"],
input[type="number"], textarea, select {
  width: 100%;
  min-width: 0; /* allow shrinking inside flex/grid — prevents mobile overflow */
  padding: 0.6rem 0.75rem;
  font-size: var(--font-size-base); /* 16px — no iOS zoom */
  background: var(--color-bg-secondary);
  color: var(--color-text-primary);
  border: 1.5px solid var(--color-border-primary);
  border-radius: var(--border-radius-md);
  transition: border-color var(--duration-fast) var(--easing-default),
              box-shadow var(--duration-fast) var(--easing-default);
}
textarea { resize: vertical; min-height: 2.6rem; }

/* iOS Safari centers the value of a native date input and adds its own
   inner spacing, so dates read inconsistently with the left-aligned text
   fields beside them. Pin the rendered value to the left. */
input[type="date"] { text-align: left; }
input[type="date"]::-webkit-date-and-time-value { text-align: left; margin: 0; }

/* A *native* iOS date control has a fixed intrinsic width that ignores
   width/min-width and the grid track, so two of them side by side overflow
   their cells, swallow the gap, and spill past the card edge. Dropping the
   native appearance makes the input a normal box that honors its 100% width.
   Scoped to iOS (-webkit-touch-callout is iOS-only) so desktop browsers keep
   their native click-to-open calendar picker. Tapping still opens the iOS
   date wheel regardless of appearance. */
@supports (-webkit-touch-callout: none) {
  input[type="date"] {
    -webkit-appearance: none;
    appearance: none;
  }
}

input:hover, textarea:hover, select:hover { border-color: color-mix(in srgb, var(--color-accent-primary) 40%, var(--color-border-primary)); }

input:focus, textarea:focus, select:focus {
  outline: none;
  border-color: var(--color-accent-primary);
  box-shadow: var(--shadow-focus);
}
::placeholder { color: var(--color-text-tertiary); }

select {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--color-text-secondary) 50%),
                    linear-gradient(135deg, var(--color-text-secondary) 50%, transparent 50%);
  background-position: calc(100% - 18px) 55%, calc(100% - 13px) 55%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-right: 2rem;
}

/* ---------- Buttons ---------- */
.btn {
  --btn-bg: var(--color-bg-secondary);
  --btn-fg: var(--color-text-primary);
  --btn-bd: var(--color-border-primary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  min-height: 44px;               /* touch target */
  padding: 0.6rem 1.1rem;
  font-weight: var(--font-weight-semibold);
  font-size: var(--font-size-base);
  color: var(--btn-fg);
  background: var(--btn-bg);
  border: 1.5px solid var(--btn-bd);
  border-radius: var(--border-radius-md);
  cursor: pointer;
  transition: transform var(--duration-fast) var(--easing-settle),
              background var(--duration-fast) var(--easing-default),
              box-shadow var(--duration-fast) var(--easing-default),
              border-color var(--duration-fast) var(--easing-default);
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

.btn--primary {
  --btn-bg: var(--color-accent-primary);
  --btn-fg: var(--color-accent-on);
  --btn-bd: var(--color-accent-primary);
  box-shadow: var(--shadow-sm);
}
.btn--primary:hover { --btn-bg: var(--color-accent-primary-hover); --btn-bd: var(--color-accent-primary-hover); box-shadow: var(--shadow-md); }
.btn--primary:active { --btn-bg: var(--color-accent-primary-active); }

.btn--ghost { --btn-bg: transparent; --btn-bd: var(--color-border-primary); }
.btn--ghost:hover { --btn-bd: var(--color-accent-primary); --btn-fg: var(--color-accent-primary); }

.btn--sm { min-height: 36px; padding: 0.35rem 0.7rem; font-size: var(--font-size-sm); }
.btn--lg { min-height: 52px; padding: 0.8rem 1.6rem; font-size: var(--font-size-md); }

/* ---------- Utilities ---------- */
.is-hidden { display: none !important; }

.wordmark__name {
  font-family: var(--font-family-display);
  font-weight: var(--font-weight-semibold);
  font-variation-settings: var(--font-display-settings);
  letter-spacing: -0.01em;
}
.wordmark__accent { color: var(--color-accent-primary); }