@layer legacy, system, kecb;
/* KECB Design System — active runtime contract, DEPLOY-780.
   One token vocabulary owns the public visual system. Component selectors live
   in kecb-system.v20260901-780r88.css; legacy family styles consume these aliases. */
html:root {
  /* Type scale: 7 steps. No rendered text may migrate below meta (14px). */
  --kecb-type-meta: 0.875rem;
  --kecb-type-small: 0.9375rem;
  --kecb-type-body: 1rem;
  --kecb-type-h4: 1.125rem;
  --kecb-type-h3: clamp(1.28rem, 2vw, 1.5rem);
  --kecb-type-h2: clamp(1.7rem, 3vw, 2.35rem);
  --kecb-type-h1: clamp(2.1rem, 4vw, 3.5rem);

  /* Weight roles. */
  --kecb-weight-regular: 400;
  --kecb-weight-medium: 600;
  --kecb-weight-strong: 750;
  --kecb-weight-display: 850;

  /* Canonical palette: brand, neutral, data, and state colors. */
  --kecb-color-black: #0b0e10;
  --kecb-color-black-raised: #111518;
  --kecb-color-ink: #17191a;
  --kecb-color-ink-soft: #50565a;
  --kecb-color-paper: #fffdf9;
  --kecb-color-paper-warm: #f7f1e8;
  --kecb-color-paper-soft: #f2ece3;
  --kecb-color-line: #ded6ca;
  --kecb-color-line-strong: #c7b9a5;
  --kecb-color-brass: #b88a48;
  --kecb-color-brass-deep: #7f5c29;
  --kecb-color-oxblood: #7d3028;
  --kecb-color-slate: #485760;
  --kecb-color-data-navy: #203d54;
  --kecb-color-white: #ffffff;
  --kecb-color-copy-on-dark: #e5ddd2;
  --kecb-color-success: #356859;
  --kecb-color-warning: #8a5a15;
  --kecb-color-danger: #8b2f2f;
  --kecb-color-info: #315a78;

  /* Semantic color ownership. Components consume these, not raw hex. */
  --kecb-surface-page: var(--kecb-color-paper);
  --kecb-surface-warm: var(--kecb-color-paper-warm);
  --kecb-surface-soft: var(--kecb-color-paper-soft);
  --kecb-surface-dark: var(--kecb-color-black);
  --kecb-surface-dark-raised: var(--kecb-color-black-raised);
  --kecb-text-primary: var(--kecb-color-ink);
  --kecb-text-secondary: var(--kecb-color-ink-soft);
  --kecb-text-on-dark: var(--kecb-color-paper);
  --kecb-text-on-dark-secondary: var(--kecb-color-copy-on-dark);
  --kecb-text-on-action: #fff8ef;
  --kecb-text-on-action-secondary: #f3dfcf;
  --kecb-action-primary: var(--kecb-color-oxblood);
  --kecb-accent: var(--kecb-color-brass);
  --kecb-border: var(--kecb-color-line);
  --kecb-border-strong: var(--kecb-color-line-strong);

  /* Eyebrow/kicker role ownership. These aliases resolve the role once;
     runtime adoption remains blocked until family browser baselines exist. */
  --kecb-eyebrow-on-light: var(--kecb-color-brass-deep);
  --kecb-eyebrow-on-dark: var(--kecb-color-brass);

  /* Spacing scale. */
  --kecb-space-1: 0.375rem;
  --kecb-space-2: 0.75rem;
  --kecb-space-3: 1rem;
  --kecb-space-4: 1.25rem;
  --kecb-space-5: 2.25rem;
  --kecb-space-6: 3.5rem;
  --kecb-space-7: 4rem;

  /* Radius scale: maximum five values, including square and pill. */
  --kecb-radius-none: 0;
  --kecb-radius-sm: 3px;
  --kecb-radius-control: 4px;
  --kecb-radius-card: 5px;
  --kecb-radius-pill: 999px;

  /* Shadow scale: maximum five values. */
  --kecb-shadow-none: none;
  --kecb-shadow-low: 0 1px 2px rgba(11, 14, 16, 0.08);
  --kecb-shadow-card: 0 4px 14px rgba(11, 14, 16, 0.10);
  --kecb-shadow-float: 0 10px 30px rgba(11, 14, 16, 0.14);
  --kecb-shadow-modal: 0 18px 54px rgba(11, 14, 16, 0.18);

  /* Runtime layout roles. */
  --kecb-page-gutter: clamp(1.25rem, 4vw, 3rem);
  --kecb-page-gutter-compact: clamp(1rem, 4vw, 1.25rem);
  --kecb-content-max: 1180px;
  --kecb-reading-measure-narrow: 56ch;
  --kecb-reading-measure-wide: 76ch;
  --kecb-control-height: 2.5rem;
  --kecb-control-height-compact: 2.25rem;

  /* Compatibility aliases. They resolve old family names to this one contract. */
  --kecb-ink: var(--kecb-color-ink);
  --kecb-ink-soft: var(--kecb-color-ink-soft);
  --kecb-paper: var(--kecb-color-paper);
  --kecb-paper-strong: var(--kecb-color-white);
  --kecb-paper-warm: var(--kecb-color-paper-warm);
  --kecb-paper-soft: var(--kecb-color-paper-soft);
  --kecb-line: var(--kecb-color-line);
  --kecb-line-strong: var(--kecb-color-line-strong);
  --kecb-brass: var(--kecb-color-brass);
  --kecb-gold: var(--kecb-color-brass);
  --kecb-rust: var(--kecb-color-oxblood);
  --kecb-rust-deep: var(--kecb-color-oxblood);
  --kecb-navy: var(--kecb-color-black);
  --kecb-navy-deep: var(--kecb-color-black);
  --kecb-navy-data: var(--kecb-color-data-navy);
  --kecb-slate: var(--kecb-color-slate);
  --kecb-surface: var(--kecb-surface-page);
  --kecb-surface-raised: var(--kecb-color-white);
  --kecb-surface-paper: var(--kecb-surface-page);
  --kecb-group-surface: var(--kecb-surface-warm);
  --kecb-group-line: var(--kecb-border);
  --kecb-text-floor: var(--kecb-type-meta);
  --kecb-visible-text-floor: var(--kecb-type-meta);
  --kecb-chrome-floor: var(--kecb-type-meta);
  --kecb-reading: var(--kecb-reading-measure);
  --kecb-reading-width: var(--kecb-reading-measure);
  --kecb-wide-reading-width: var(--kecb-reading-measure-wide);
  --kecb-content: var(--kecb-content-max);
  --kecb-max: var(--kecb-content-max);
  --kecb-radius: var(--kecb-radius-card);
  --kecb-radius-lg: var(--kecb-radius-card);
  --kecb-shadow-sm: var(--kecb-shadow-low);
  --kecb-shadow-md: var(--kecb-shadow-card);
  --kecb-focus: var(--kecb-color-brass);

  /* Breakpoint reference tokens. CSS custom properties cannot be used inside
     @media conditions; migrations must use these exact literal values. */
  --kecb-breakpoint-1: 420px;
  --kecb-breakpoint-2: 560px;
  --kecb-breakpoint-3: 700px;
  --kecb-breakpoint-4: 760px;
  --kecb-breakpoint-5: 900px;
  --kecb-breakpoint-6: 1050px;
  --kecb-breakpoint-7: 1180px;
  --kecb-breakpoint-8: 1280px;

  /* Layout measures. */
  --kecb-reading-measure: 68ch;
  --kecb-working-width: 960px;
  --kecb-discovery-width: 1180px;
}


/* DEPLOY-780 responsive token resolution. Tokens are intentionally unlayered,
   so responsive ownership stays in the token contract rather than relying on a
   lower-priority component layer to redefine them. */
@media (max-width: 560px) {
  html:root { --kecb-page-gutter: var(--kecb-page-gutter-compact); }
}