/* CLIXHOUSE design system — element base
   ─────────────────────────────────────────────────────────────────
   Element-level defaults that consume the semantic token contract.
   Sites may extend or override individual rules within their own
   @layer base block.

   Imported via:  @import url("/static/design/base.css") layer(base);
*/

@layer base {
  /* Root: modest fluid scaling on top of the user's base font size.
     The clamp floor is 1rem (= user preference), so zoom and OS
     font-size settings still work; the upper end gently grows with
     wider viewports. Sites that want a different floor override in
     their own @layer base. */
  html {
    font-size: clamp(1rem, 0.94rem + 0.3vw, 1.125rem);
    color-scheme: light dark;
    text-size-adjust: 100%;
  }

  body {
    font-family: var(--font-body, system-ui, sans-serif);
    font-size: var(--step-0, 1rem);
    color: var(--text-body, currentColor);
    background: var(--surface-0, canvas);
    line-height: 1.55;
    /* Pin the fallback font's apparent x-height to the webfont's so the
       FOUT/swap doesn't jump layout (CLS). The 0.52 default suits most
       humanist sans stacks; sites tune --font-aspect to their primary
       WOFF2's metrics. Baseline newly available 2024-07. */
    font-size-adjust: var(--font-aspect, 0.52);
  }

  /* Headings — display family, balanced wrap (set in reset), strong
     color. Sizes from the modular scale. Sites override scale steps
     in their @layer tokens. */
  h1 {
    font-family: var(--font-display, inherit);
    font-size: var(--step-5, 2.5rem);
    color: var(--text-strong, currentColor);
    line-height: 1.05;
  }
  h2 {
    font-family: var(--font-display, inherit);
    font-size: var(--step-4, 2rem);
    color: var(--text-strong, currentColor);
    line-height: 1.1;
  }
  h3 {
    font-family: var(--font-display, inherit);
    font-size: var(--step-3, 1.6rem);
    color: var(--text-strong, currentColor);
    line-height: 1.15;
  }
  h4 {
    font-family: var(--font-display, inherit);
    font-size: var(--step-2, 1.3rem);
    color: var(--text-strong, currentColor);
    line-height: 1.2;
  }
  h5, h6 {
    font-family: var(--font-display, inherit);
    font-size: var(--step-1, 1.15rem);
    color: var(--text-strong, currentColor);
    line-height: 1.25;
  }

  /* Paragraphs: measure (reading width) cap; sites override per
     context. */
  p {
    max-inline-size: var(--measure, 65ch);
  }

  /* Links — inherit color but advertise interactivity. Sites style
     the underline treatment in their components layer. */
  a {
    color: var(--accent, currentColor);
    text-underline-offset: 0.2em;
  }

  /* Prose lists (without role="list") get markers back; reset
     stripped only the role-listed ones. */
  ul:not([role="list"]),
  ol:not([role="list"]) {
    padding-inline-start: 1.5rem;
  }

  /* Code & pre — mono family, restrained sizing. */
  code, kbd, samp {
    font-family: var(--font-mono, ui-monospace, monospace);
    font-size: 0.92em;
  }
  pre {
    font-family: var(--font-mono, ui-monospace, monospace);
    font-size: var(--step--1, 0.9rem);
    overflow-x: auto;
  }

  /* Horizontal rule — subtle by default. */
  hr {
    border: 0;
    block-size: 1px;
    background: var(--border-subtle, currentColor);
    inline-size: 100%;
  }

  /* Tables — predictable spacing. Sites style per design. */
  table {
    border-collapse: collapse;
    inline-size: 100%;
  }
}