/* ==========================================================================
   Flexopack — Element Defaults
   --------------------------------------------------------------------------
   Two scopes:

     1. Element-level defaults. Apply to every element on every page —
        kept narrow on purpose. Typography baseline, link colors, focus
        rings, form basics, a11y helpers. NO max-widths, NO sibling
        spacing, NO list bullets — components shouldn't fight base.

     2. `.prose` opt-in (further down). Vertical rhythm, max-widths, list
        bullets — the rich-text behavior wanted for markdown content.
        Wrap CMS body output in <div class="prose">.

   Light-mode only — Flexopack is a B2B brochure site; no dark theme.
   ========================================================================== */

@layer base {
  /* ----- Root + body --------------------------------------------------- */

  html {
    line-height: var(--leading-normal);
    color-scheme: light;
    scroll-behavior: smooth;
  }

  body {
    font-family: var(--font-primary);
    font-size: var(--text-m);
    font-weight: var(--weight-regular);
    color: var(--text-body);
    background-color: var(--bg-body);
    letter-spacing: -0.005em;
  }

  /* ----- Headings (typography only, no spacing rules) ------------------ */

  h1, h2, h3, h4, h5, h6 {
    font-weight: var(--weight-semibold);
    line-height: var(--leading-tight);
    letter-spacing: -0.02em;
    color: var(--text-title);
    text-wrap: balance;
  }

  h1 { font-size: var(--text-4xl); }
  h2 { font-size: var(--text-3xl); }
  h3 { font-size: var(--text-2xl); }
  h4 { font-size: var(--text-xl); }
  h5 { font-size: var(--text-l); }
  h6 {
    font-size: var(--text-s);
    text-transform: uppercase;
    letter-spacing: 0.04em;
  }

  /* ----- Inline text --------------------------------------------------- */

  p          { text-wrap: pretty; }
  strong, b  { font-weight: var(--weight-semibold); }
  em, i      { font-style: italic; }
  small      { font-size: var(--text-s); color: var(--text-muted); }

  /* ----- Links --------------------------------------------------------- */

  a {
    color: inherit;
    text-decoration: none;
    transition: color var(--duration-fast) var(--ease-standard),
                opacity var(--duration-fast) var(--ease-standard);
  }

  /* ----- Selection & focus --------------------------------------------- */

  ::selection {
    background-color: var(--primary-30);
    color: var(--text-title);
  }

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

  /* ----- Skip link (a11y plumbing — visible only when focused) -------- */

  .skip-link {
    position: absolute;
    top: var(--space-xs);
    left: var(--space-xs);
    z-index: 9999;
    padding: var(--space-xs) var(--space-s);
    background: var(--bg-surface);
    color: var(--text-body);
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-s);
    text-decoration: none;
    transform: translateY(-200%);
    transition: transform var(--duration-fast) var(--ease-standard);
  }

  .skip-link:focus,
  .skip-link:focus-visible {
    transform: translateY(0);
  }

  /* ====================================================================
     .prose — opt-in rich-text rhythm
     --------------------------------------------------------------------
     Wrap markdown output (or any rich-text region) in <div class="prose">
     to get reading-comfortable line lengths, vertical rhythm between
     blocks, list bullets, blockquote treatment, and code/pre styling.
     ==================================================================== */

  .prose {
    max-width: 72ch;
    color: var(--text-body);
    line-height: var(--leading-relaxed);
  }

  .prose :where(p, ul, ol, blockquote, pre, figure, table) + :where(p, ul, ol, blockquote, pre, figure, table) {
    margin-top: var(--space-m);
  }

  .prose :where(h1, h2, h3, h4, h5, h6) + * {
    margin-top: var(--space-m);
  }

  .prose :where(p, ul, ol, blockquote, pre, hr, figure, table) + :where(h1, h2, h3, h4, h5, h6) {
    margin-top: var(--space-2xl);
  }

  .prose :where(ul, ol) {
    padding-left: var(--space-l);
  }
  .prose :where(ul) { list-style: disc; }
  .prose :where(ol) { list-style: decimal; }

  .prose li + li { margin-top: var(--space-2xs); }
  .prose li > :where(ul, ol) { margin-top: var(--space-2xs); }

  .prose blockquote {
    padding-left: var(--space-m);
    border-left: 3px solid var(--primary);
    color: var(--text-muted);
    font-style: italic;
  }

  .prose hr {
    border: 0;
    height: 1px;
    background: var(--border-primary);
    margin-block: var(--space-2xl);
  }

  .prose figure { margin-block: var(--space-l); }

  .prose figcaption {
    margin-top: var(--space-2xs);
    font-size: var(--text-s);
    color: var(--text-muted);
    text-align: center;
  }

  .prose a {
    color: var(--primary-d-1);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.18em;
    text-decoration-color: var(--primary-50);
  }

  .prose a:hover {
    color: var(--primary);
    text-decoration-color: currentColor;
  }

  .prose code,
  .prose kbd,
  .prose samp,
  .prose pre {
    font-family: var(--font-mono);
    font-size: 0.9em;
  }

  .prose :not(pre) > code {
    padding: 0.15em 0.35em;
    background-color: var(--bg-muted);
    border-radius: var(--radius-xs);
  }

  .prose pre {
    padding: var(--space-m);
    background-color: var(--bg-muted);
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-s);
    overflow-x: auto;
    line-height: var(--leading-snug);
  }

  .prose pre code {
    padding: 0;
    background: none;
    font-size: inherit;
  }

  .prose table {
    width: 100%;
    font-size: var(--text-s);
    text-align: left;
  }

  .prose th,
  .prose td {
    padding: var(--space-s) var(--space-m);
    border-bottom: 1px solid var(--border-primary);
  }

  .prose th {
    font-weight: var(--weight-semibold);
    color: var(--text-title);
  }
}