/* assets/css/base.css
 * @layer reset  — modern CSS reset
 * @layer global — base element styles
 * ════════════════════════════════════════════════════════════════════ */


/* ════════════════════════════════════════════════════════════════════
   @layer reset
   ════════════════════════════════════════════════════════════════════ */

@layer reset {

  *,
  *::before,
  *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    border: 0;
    font-style: normal;
  }

  /* Remove default list styles */
  ul,
  ol {
    list-style: none;
  }

  /* Responsive media */
  img,
  video,
  svg,
  canvas,
  picture {
    display: block;
    max-inline-size: 100%;
    block-size: auto;
  }

  /* Inherit fonts on all form controls */
  input,
  button,
  textarea,
  select {
    font: inherit;
    color: inherit;
  }

  /* Remove default button chrome */
  button {
    background: none;
    cursor: pointer;
  }

  /* Remove animations for users who prefer reduced motion */
  @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;
    }
  }

}


/* ════════════════════════════════════════════════════════════════════
   @layer global
   ════════════════════════════════════════════════════════════════════ */

@layer global {

  /* ── Document root ── */

  html {
    font-size: 100%;                   /* respect user font-size preference */
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;    /* prevent iOS font inflation */
    text-size-adjust: 100%;
    hanging-punctuation: first last;
  }

  /* ── Body ── */

  body {
    font-family: var(--font-body);
    font-size: var(--text-m);
    font-weight: var(--weight-regular);
    font-style: normal;
    line-height: var(--leading-normal);
    color: var(--text-body);
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    background-color: var(--body-bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }


  /* Sticky footer — push footer to bottom on short pages */
  #page {
    display: flex;
    flex-direction: column;
    min-block-size: 100dvh;
  }

  #content {
    flex: 1;
  }

  /* ── Heading scale ─────────────────────────────────────────────────
     h1 → --heading-2xl   h4 → --heading-m
     h2 → --heading-xl    h5 → --heading-s
     h3 → --heading-l     h6 → --heading-xs
  ── */

  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    font-family: var(--font-heading);
    font-weight: var(--weight-bold);
    line-height: var(--leading-tight);
    letter-spacing: var(--tracking-tight);
    color: var(--text-main);
    text-wrap: balance;
  }

  h1 { font-size: var(--heading-2xl); }
  h2 { font-size: var(--heading-xl); }
  h3 { font-size: var(--heading-l); }
  h4 { font-size: var(--heading-m); }
  h5 { font-size: var(--heading-s); }
  h6 { font-size: var(--heading-xs); }

  /* ── Body copy ── */

  p {
    font-size: var(--text-m);
    line-height: var(--leading-relaxed);
    color: var(--text-body);
    text-wrap: pretty;
    max-inline-size: 70ch;
  }

  /* ── Blockquote ── */

  blockquote {
    padding-inline-start: var(--space-m);
    border-inline-start: var(--divider-accent);
    color: var(--text-muted);
    font-size: var(--text-l);
    line-height: var(--leading-relaxed);
  }

  /* ── Monospace / code ── */

  pre,
  code,
  kbd,
  samp {
    font-family: var(--font-mono);
    font-size: var(--text-s);
  }

  pre {
    background-color: var(--surface-sunken);
    border: var(--table-border);
    border-radius: var(--radius-m);
    padding: var(--space-m);
    overflow-x: auto;
    line-height: var(--leading-loose);
  }

  code {
    background-color: var(--surface-sunken);
    padding-block: var(--space-3xs);
    padding-inline: var(--space-2xs);
    border-radius: var(--radius-xs);
  }

  /* Strip code background when nested inside pre */
  pre code {
    background-color: transparent;
    padding: 0;
    border-radius: 0;
    font-size: inherit;
  }

  /* ── Links ── */

  a {
    color: var(--text-link);
    text-decoration-color: color-mix(in oklch, var(--text-link) 40%, transparent);
    text-underline-offset: 0.2em;
    transition:
      color var(--duration-fast) var(--ease-default),
      text-decoration-color var(--duration-fast) var(--ease-default);
  }

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

  a:visited {
    color: var(--text-link-visited);
  }

  /* ── Focus ── */

  :focus-visible {
    outline: var(--focus-ring);
    outline-offset: var(--focus-ring-offset);
    border-radius: var(--radius-xs);
  }

  /* ── Selection ── */

  ::selection {
    background-color: var(--primary-ultra-light);
    color: var(--primary-ultra-dark);
  }

  /* ── Horizontal rule ── */

  hr {
    border: none;
    border-block-start: var(--divider);
    color: inherit;
  }

  /* ── Inline text elements ── */

  strong,
  b {
    font-weight: var(--weight-bold);
    color: var(--text-main);
  }

  /* No italics on UI elements — blog content / user HTML may still use <em> */
  h1, h2, h3, h4, h5, h6,
  .btn, [class*="btn--"],
  .badge, .nav, .card,
  .tab-bar, .breadcrumb,
  label, legend, th,
  .section-header, .site-footer {
    font-style: normal;
  }

  small {
    font-size: var(--text-xs);
    color: var(--text-muted);
  }

  abbr[title] {
    text-decoration: underline dotted;
    cursor: help;
    text-underline-offset: 0.2em;
  }

  /* ── Tables ─────────────────────────────────────────────────────────
     Base styles only. Richer .table component variants live in
     a dedicated component file.
  ── */

  table {
    inline-size: 100%;
    border-collapse: collapse;
    font-size: var(--text-m);
  }

  thead {
    background-color: var(--table-header-bg);
  }

  th {
    font-size: var(--table-header-font-size);
    font-weight: var(--table-header-weight);
    letter-spacing: var(--table-header-tracking);
    text-transform: var(--table-header-transform);
    color: var(--table-header-text);
    padding-block: var(--table-padding-block);
    padding-inline: var(--table-padding-inline);
    text-align: start;
    border-block-end: var(--table-border-strong);
  }

  td {
    padding-block: var(--table-padding-block);
    padding-inline: var(--table-padding-inline);
    min-block-size: var(--table-row-height);
    border-block-end: var(--table-border);
    vertical-align: middle;
  }

  tbody tr:nth-child(even) {
    background-color: var(--table-row-stripe-bg);
  }

  /* ── Skip link ─────────────────────────────────────────────────────
     Visually hidden until keyboard-focused — satisfies WCAG 2.4.1.
     Token source: §19 --skip-link-*
  ── */

  .skip-link {
    position: absolute;
    inset-block-start: var(--space-s);
    inset-inline-start: var(--space-s);
    padding: var(--skip-link-padding);
    background-color: var(--skip-link-bg);
    color: var(--skip-link-text);
    font-family: var(--font-body);
    font-size: var(--text-m);
    font-weight: var(--weight-semibold);
    text-decoration: none;
    border-radius: var(--radius-s);
    z-index: var(--z-max);
    transform: translateY(-200%);
    transition: transform var(--duration-fast) var(--ease-out);
  }

  .skip-link:focus {
    transform: translateY(0);
    outline: var(--focus-ring);
    outline-offset: var(--focus-ring-offset);
  }

}