/*
 * Shared CDI Foundation CSS token mirror (P2-WP-07 DII Token Implementation
 * Slice 1).
 *
 * Mirrors platform/design-system/foundation/{spacing-scale,typography-scale,
 * layout}.ts exactly, under the shared --cdi-* namespace, per
 * decisions/DII_RENDERING_ARCHITECTURE_BASELINE.md's Foundation-to-CSS
 * mirroring decision: a hand-maintained, checked-in CSS file protected by a
 * conformance test (tests/unit/design-system/foundation-css-conformance.test.ts),
 * the same precedent tests/unit/core-plugin/php-contract-conformance.test.ts
 * already establishes for the Core Plugin's PHP/TypeScript boundary. If a
 * mirrored value here and its TypeScript source diverge, the conformance
 * test fails — this file is never the source of truth, only a mirror.
 *
 * Location: this file lives under platform/design-system/, not
 * sites/dii/, because every value here is a shared CDI primitive, not a
 * DII-specific one (platform/design-system/README.md "Relationship to
 * other areas": a site's child theme depends on this package; this
 * package must never depend on a site's child-theme content).
 *
 * Breakpoints are deliberately NOT mirrored as custom properties here:
 * CSS custom properties cannot be substituted into an @media query
 * threshold in standard CSS (`@media (min-width: var(--x))` does not
 * work), so a --cdi-breakpoint-* property would be non-functional and
 * misleading. Foundation's BREAKPOINTS (mobile: 320px, tablet: 768px,
 * desktop: 1024px, wide: 1280px — platform/design-system/foundation/
 * breakpoints.ts) remain TypeScript-only; a later renderer applies the
 * literal value directly in its own @media rule, sourced from that file
 * at the time it is written.
 *
 * No colour, no brand literal, no DII-specific value of any kind
 * appears in this file — colour is a Brand Token
 * (platform/design-system/README.md "Prohibited content") and belongs
 * only in a per-site file such as sites/dii/child-theme/dii-tokens.css.
 */

:root {
  /* Spacing scale (platform/design-system/foundation/spacing-scale.ts SPACING_SCALE) */
  --cdi-spacing-xs: 0.25rem;
  --cdi-spacing-sm: 0.5rem;
  --cdi-spacing-md: 1rem;
  --cdi-spacing-lg: 1.5rem;
  --cdi-spacing-xl: 2rem;
  --cdi-spacing-2xl: 3rem;
  --cdi-spacing-3xl: 4rem;
  --cdi-spacing-4xl: 6rem;

  /* Typography scale (platform/design-system/foundation/typography-scale.ts TYPOGRAPHY_SCALE) */
  --cdi-font-size-body-small: 0.875rem;
  --cdi-line-height-body-small: 1.5;
  --cdi-font-weight-body-small: 400;

  --cdi-font-size-body: 1rem;
  --cdi-line-height-body: 1.5;
  --cdi-font-weight-body: 400;

  --cdi-font-size-h6: 1.125rem;
  --cdi-line-height-h6: 1.3;
  --cdi-font-weight-h6: 700;

  --cdi-font-size-h5: 1.25rem;
  --cdi-line-height-h5: 1.3;
  --cdi-font-weight-h5: 700;

  --cdi-font-size-h4: 1.5rem;
  --cdi-line-height-h4: 1.2;
  --cdi-font-weight-h4: 700;

  --cdi-font-size-h3: 1.875rem;
  --cdi-line-height-h3: 1.2;
  --cdi-font-weight-h3: 700;

  --cdi-font-size-h2: 2.25rem;
  --cdi-line-height-h2: 1.15;
  --cdi-font-weight-h2: 700;

  --cdi-font-size-h1: 3rem;
  --cdi-line-height-h1: 1.1;
  --cdi-font-weight-h1: 700;

  /* Grid primitive (platform/design-system/foundation/layout.ts FOUNDATION_GRID) */
  --cdi-grid-columns: 12;
  --cdi-grid-gutter: 1rem;
  --cdi-grid-max-content-width: 75rem;
}