/* type-system.css — the shared type system (font_best.md, Part 7).
   Products never edit this file. Typography only: per the 2026-10-15 rollout,
   each site keeps its own color palette, so the color tokens of Part 7 are not shipped here. */
@layer ts-tokens, ts-base, ts-utilities;  /* prefixed so they never reorder a host site's own layers */

@font-face {
  font-family: "Inter";
  src: url("../fonts/inter.woff2") format("woff2");
  font-weight: 400 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Inter Fallback";
  src: local("Arial"), local("Helvetica");
  size-adjust: 107.1%;
  ascent-override: 90.4%;
  descent-override: 22.5%;
  line-gap-override: 0%;
}

@layer ts-tokens {
  :root {
    --font-sans: "Inter", "Inter Fallback", system-ui, -apple-system, "Segoe UI", sans-serif;
    --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

    --font-size-caption: 0.75rem;
    --font-size-small:   0.875rem;
    --font-size-body:    1rem;
    --font-size-lead:    1.125rem;
    --font-size-sub:     1.25rem;
    --font-size-heading: 1.5rem;
    --font-size-title:   clamp(2rem, 1.75rem + 1vw, 2.5rem);
    --font-size-display: clamp(2.75rem, 2.4rem + 1.4vw, 3.75rem);

    --weight-regular: 400;
    --weight-medium: 500;
    --weight-semibold: 600;

    --leading-display: 1.05;
    --leading-title: 1.1;
    --leading-heading: 1.2;
    --leading-sub: 1.3;
    --leading-body: 1.55;
    --leading-small: 1.5;
    --leading-caption: 1.45;
    --leading-label: 1.3;

    --tracking-display: -0.02em;
    --tracking-title: -0.015em;
    --tracking-heading: -0.01em;
    --tracking-caps: 0.06em;

    --measure: 65ch;
    --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem;
    --space-5: 1.5rem;  --space-6: 2rem;   --space-7: 3rem;    --space-8: 4rem;
    --space-9: 6rem;    --space-10: 8rem;
    --space-paragraph: 1em;
    --space-heading-above: 2.5em;
    --space-heading-below: 0.5em;
    --space-card: var(--space-5);
    --space-section-app: var(--space-7);
    --space-section: clamp(2.5rem, 8vw, 6rem);
    --gutter: clamp(1rem, 3.5vw, 2.5rem);
  }
}

@layer ts-base {
  html {
    font-family: var(--font-sans);
    font-synthesis: none;
    font-optical-sizing: auto;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
  }
  body { font: var(--weight-regular) var(--font-size-body) / var(--leading-body) var(--font-sans); }
  :lang(ja), :lang(zh), :lang(ko) { line-height: 1.7; font-style: normal; }
  h1 { font-size: var(--font-size-title);   font-weight: var(--weight-semibold); line-height: var(--leading-title);   letter-spacing: var(--tracking-title);   text-wrap: balance; }
  h2 { font-size: var(--font-size-heading); font-weight: var(--weight-medium);   line-height: var(--leading-heading); letter-spacing: var(--tracking-heading); text-wrap: balance; }
  h3 { font-size: var(--font-size-sub);     font-weight: var(--weight-medium);   line-height: var(--leading-sub);     text-wrap: balance; }
  h4, h5, h6 { font-size: var(--font-size-body); font-weight: var(--weight-medium); line-height: var(--leading-body); }
  p, li { text-wrap: pretty; }
  p { max-inline-size: var(--measure); }
  small { font-size: var(--font-size-caption); line-height: var(--leading-caption); }
  strong, b { font-weight: var(--weight-medium); }
  code, kbd, pre, samp { font-family: var(--font-mono); font-size: max(0.875em, 0.875rem); }
  pre { overflow-x: auto; max-inline-size: 100%; }
  td, th, [data-numeric] { font-variant-numeric: tabular-nums; }
  input, select, textarea, button { font: inherit; }
  input, select, textarea { font-size: max(var(--font-size-body), 100%); }
  a { text-underline-offset: 0.15em; }
}

@layer ts-utilities {
  .t-display    { font-size: var(--font-size-display); font-weight: var(--weight-semibold); line-height: var(--leading-display); letter-spacing: var(--tracking-display); text-wrap: balance; }
  .t-title      { font-size: var(--font-size-title);   font-weight: var(--weight-semibold); line-height: var(--leading-title);   letter-spacing: var(--tracking-title); }
  .t-heading    { font-size: var(--font-size-heading); font-weight: var(--weight-medium);   line-height: var(--leading-heading); letter-spacing: var(--tracking-heading); }
  .t-subheading { font-size: var(--font-size-sub);     font-weight: var(--weight-medium);   line-height: var(--leading-sub); }
  .t-lead       { font-size: var(--font-size-lead);    font-weight: var(--weight-regular);  line-height: var(--leading-body); }
  .t-body       { font-size: var(--font-size-body);    font-weight: var(--weight-regular);  line-height: var(--leading-body); }
  .t-body-sm    { font-size: var(--font-size-small);   font-weight: var(--weight-regular);  line-height: var(--leading-small); }
  .t-label      { font-size: var(--font-size-small);   font-weight: var(--weight-medium);   line-height: var(--leading-label); }
  .t-overline   { font-size: var(--font-size-caption); font-weight: var(--weight-medium);   line-height: var(--leading-label);   letter-spacing: var(--tracking-caps); text-transform: uppercase; }
  .t-caption    { font-size: var(--font-size-caption); font-weight: var(--weight-regular);  line-height: var(--leading-caption); }
  .t-code       { font-family: var(--font-mono); font-size: max(0.875em, 0.875rem); }
  .t-numeric    { font-variant-numeric: tabular-nums; }
  .reading { font-size: var(--font-size-lead); }
}