/* ==========================================================================
   base.css
   Reset + temel tipografi + ortak container.
   tokens.css bağımlı (renkler, font).
   ========================================================================== */

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
}

body {
  font-family: var(--font-family);
  font-size: var(--fs-base);
  color: var(--color-text);
  background: var(--color-bg-subtle);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, p, ul, figure {
  margin: 0;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  font-family: inherit;
  cursor: pointer;
}

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

/* Focus ring — single source of truth. Brand color, 2px outline
   with 2px offset, respects border-radius. Applies to any
   natively focusable element. Without this, default browser
   outlines show on some elements and not others (browser
   defaults + form reset). WCAG 2.4.7. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--color-brand);
  outline-offset: 2px;
  border-radius: var(--radius-button);
}

/* Input/textarea focus already shows via the brand ring above;
   their default ring (browser blue) gets overridden by the
   brand rule. We add an inner ring on form fields so the
   focus state is unmistakable in dense forms. */
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline-offset: 1px;
}

/* Container — merkezi içerik satırı. baseof.html `<main>` da bunu kullanır. */
.container {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--space-5);
}

@media (max-width: 768px) {
  /* Bump base font from 14px to 16px on phone-sized viewports.
     14px body text on a 390px screen strains the eye and the
     iOS Safari form-zoom trigger (forces layout when input
     font-size < 16px). One source-of-truth override on the
     root cascade so every component that uses var(--fs-base)
     benefits. */
  :root {
    --fs-base: 16px;
    --fs-sm: 14px;
    --fs-xs: 13px;
  }
}

@media (max-width: 640px) {
  .container {
    padding: 0 var(--space-4);
  }
}