/*
 * Design tokens — the ONLY file in services/web with literal design values
 * (docs/ui-intent/design-system.md, docs/tdrs/web/ui-assets.md). Everything else uses var(--…).
 *
 * Contrast pairs: every "@contrast <text> on <background> <min ratio>" line below is checked by
 * ui's tests against BOTH the light and the dark block, so a palette change that breaks WCAG AA
 * fails the build instead of shipping.
 *
 * @contrast --color-ink on --color-bg 4.5
 * @contrast --color-ink on --color-surface 4.5
 * @contrast --color-ink-secondary on --color-bg 4.5
 * @contrast --color-ink-secondary on --color-surface 4.5
 * @contrast --color-status-bad on --color-bg 4.5
 * @contrast --color-status-bad on --color-surface 4.5
 * @contrast --color-status-ok on --color-bg 4.5
 * @contrast --color-status-ok on --color-surface 4.5
 * @contrast --color-ink on --color-alert-bg 4.5
 * @contrast --color-alert-text on --color-alert-bg 4.5
 * @contrast --color-alert-icon on --color-alert-bg 3
 * @contrast --color-ink on --color-highlight 4.5
 * @contrast --color-on-ink on --color-ink 4.5
 */

@font-face {
  font-family: "Plus Jakarta Sans";
  font-style: normal;
  font-display: swap;
  font-weight: 200 800;
  src: url(fonts/plus-jakarta-sans-5.3.0-latin-ext-wght.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Plus Jakarta Sans";
  font-style: normal;
  font-display: swap;
  font-weight: 200 800;
  src: url(fonts/plus-jakarta-sans-5.3.0-latin-wght.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  color-scheme: light dark;

  /* Light palette — the C1 values, a human decision (escalation trigger: do not change). */
  --color-bg: #FFFDF7;
  --color-ink: #262220;
  --color-ink-secondary: #6A625C;
  --color-surface: #F5F1E6;
  --color-highlight: #F6D77A;
  --color-brand-dot: #E0A21B;
  --color-alert-bg: #FBF0D5;
  --color-alert-icon: #8A5A00;
  --color-alert-text: #4E463F;
  --color-status-bad: #A3360F;
  --color-status-ok: #1E6B3F;
  --color-border-soon: #DDD5C4;
  --color-on-ink: #FFFDF7;

  /* Brand identification fills: the same in both modes, never used for text on the page. */
  --brand-telegram: #2A8BD0;
  --brand-google: #3B6FD8;
  --brand-on-fill: #FFFFFF;

  /* Typography */
  --font-family: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-heavy: 800;
  --size-h1: 34px;
  --size-h2: 21px;
  --size-body: 16px;
  --size-subtitle: 15px;
  --size-meta: 14px;
  --size-footer: 13px;
  --size-wordmark: 22px;
  --size-avatar: 13px;
  --line-body: 1.45;
  --line-h1: 1.05;
  --tracking-h1: -0.035em;
  --tracking-h2: -0.03em;
  --tracking-wordmark: -0.04em;
  --comma-pull: -0.06em; /* Plus Jakarta Sans sets a wide gap before "," after round letters ("Wedo ,") */

  /* Spacing */
  --space-1: 2px;
  --space-2: 4px;
  --space-3: 8px;
  --space-4: 12px;
  --space-5: 16px;
  --space-6: 24px;
  --space-7: 32px;
  --gutter: 24px;
  --column-max: 32rem;

  /* Shape and size */
  --radius-row: 16px;
  --radius-alert: 18px;
  --radius-pill: 999px;
  --touch: 44px;
  --header-height: 56px;
  --disc-row: 40px;
  --disc-avatar: 34px;
  --icon-row: 20px;
  --icon-small: 18px;
  --border-width: 1px;
  --border-soon-width: 2px;
  --highlight-from: 58%;
  --highlight-to: 92%;
}

@media (prefers-color-scheme: dark) {
  :root {
    /* Dark palette — approved by the human 2026-10-08 (design-system.md "Dark mode"); same names, warm values. */
    --color-bg: #1A1714;
    --color-ink: #F4EFE6;
    --color-ink-secondary: #B3A99F;
    --color-surface: #26221E;
    --color-highlight: #6B5413;
    --color-brand-dot: #E9B23C;
    --color-alert-bg: #3A2E14;
    --color-alert-icon: #F2C25B;
    --color-alert-text: #E6DCCB;
    --color-status-bad: #F28B66;
    --color-status-ok: #7FCB9B;
    --color-border-soon: #4A4239;
    --color-on-ink: #1A1714;
  }
}