/* ============================================================
   Base, Reset, typography, and primitives (v1.1, Rubik)
   ============================================================ */

@layer reset, base, components, utilities;

/* ===== Reset ===== */
@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  * { margin: 0; }

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

  body {
    line-height: 1.7;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
  }

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

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

  button {
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
  }

  a { color: inherit; text-decoration: none; }
  ul, ol { padding: 0; }
  p, h1, h2, h3, h4, h5, h6 { overflow-wrap: break-word; }

  :focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 3px;
    border-radius: 2px;
  }

  ::selection {
    background: var(--color-primary);
    color: var(--color-surface);
  }

  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
      scroll-behavior: auto !important;
    }
  }
}

/* ===== Base typography & body ===== */
@layer base {
  html {
    font-family: var(--font-body);
    color: var(--color-text);
    background: var(--color-bg);
  }

  body {
    font-size: var(--fs-body);
    min-block-size: 100vh;
    display: flex;
    flex-direction: column;
  }

  main { flex: 1; }

  h1, h2, h3, h4 {
    font-family: var(--font-heading);
    color: var(--color-text);
  }

  h1 {
    font-size: var(--fs-h1);
    line-height: 1.2;
    letter-spacing: 0;
    font-weight: var(--fw-bold);
  }

  h2 {
    font-size: var(--fs-h2);
    line-height: 1.25;
    letter-spacing: 0;
    font-weight: var(--fw-bold);
    margin-block-end: var(--space-md);
  }

  h3 {
    font-size: var(--fs-h3);
    line-height: 1.35;
    letter-spacing: 0;
    font-weight: var(--fw-semibold);
    color: var(--color-primary-mid);
    margin-block-end: var(--space-sm);
  }

  h4 {
    font-size: var(--fs-h4);
    line-height: 1.4;
    font-weight: var(--fw-semibold);
    margin-block-end: var(--space-xs);
  }

  p { line-height: 1.75; }
  p + p { margin-block-start: var(--space-sm); }

  .lead {
    font-size: var(--fs-lead);
    color: var(--color-text-secondary);
    line-height: 1.6;
  }

  small, .caption {
    font-size: var(--fs-caption);
    color: var(--color-text-secondary);
  }

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

  /* Mobile typography */
  @media (max-width: 768px) {
    h1 { font-size: 36px; line-height: 1.25; }
    h2 { font-size: 28px; }
    h3 { font-size: 22px; }
    h4 { font-size: 19px; }
    body { font-size: 16px; }
    .lead { font-size: 18px; }
  }
}

/* ===== Layout primitives ===== */
@layer base {
  .container {
    max-inline-size: var(--container-max);
    margin-inline: auto;
    padding-inline: var(--container-padding);
  }

  .container-narrow {
    max-inline-size: var(--container-narrow);
    margin-inline: auto;
    padding-inline: var(--container-padding);
  }

  .container-wide {
    max-inline-size: var(--container-wide);
    margin-inline: auto;
    padding-inline: var(--container-padding);
  }

  @media (max-width: 768px) {
    .container, .container-narrow, .container-wide {
      padding-inline: 20px;
    }
  }

  section {
    padding-block: var(--space-3xl);
  }

  @media (max-width: 768px) {
    section { padding-block: var(--space-2xl); }
  }

  /* Skip link */
  .skip-link {
    position: absolute;
    inset-inline-start: 50%;
    inset-block-start: -100px;
    transform: translateX(50%);
    background: var(--color-primary);
    color: var(--color-surface);
    padding: 12px 20px;
    border-radius: var(--radius-md);
    z-index: var(--z-toast);
    transition: inset-block-start var(--duration-fast);
  }

  [dir="rtl"] .skip-link { transform: translateX(-50%); }
  .skip-link:focus { inset-block-start: 12px; }
}

/* ===== Utilities ===== */
@layer utilities {
  .visually-hidden {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }

  .text-center { text-align: center; }
  .text-start  { text-align: start; }

  .mt-sm { margin-block-start: var(--space-sm); }
  .mt-md { margin-block-start: var(--space-md); }
  .mt-lg { margin-block-start: var(--space-lg); }
  .mt-xl { margin-block-start: var(--space-xl); }
  .mt-2xl { margin-block-start: var(--space-2xl); }

  .mb-sm { margin-block-end: var(--space-sm); }
  .mb-md { margin-block-end: var(--space-md); }
  .mb-lg { margin-block-end: var(--space-lg); }
  .mb-xl { margin-block-end: var(--space-xl); }
}