/*
 * Tinkrite design tokens — the single web copy of the palette.
 *
 * Mirrors tinkrite-app/src/shared/theme/tokens.ts one-for-one. Every page on tinkrite.com links
 * this file first, then its own stylesheet; nothing else may declare a --tk-* colour.
 *
 * The palette is expressed in THREE places overall, and a change has to land in all of them:
 *
 *   1. tinkrite-app/src/shared/theme/tokens.ts                        (the app itself)
 *   2. deploy/identity/keycloak/themes/tinkrite/login/resources/css/  (the sign-in pages)
 *   3. this file                                                      (the whole of tinkrite.com)
 *
 * It used to be four: the legal documents carried their own copy until this file was extracted
 * from legal.css. Do not reintroduce a fourth by pasting these values into site.css.
 *
 * TYPEFACE IS DELIBERATELY NOT HERE. The landing page is Baloo 2 (it is brand surface); the legal
 * documents stay on the reader's system UI font, because a rounded display face reads badly over
 * long prose and because those pages must not need a font download at all. Each stylesheet sets
 * its own --tk-font. See the header of legal.css.
 *
 * The app is light-only (app.json -> userInterfaceStyle: "light"), so the site is too. There is
 * deliberately no dark-mode block: inventing one here would diverge from the design system rather
 * than extend it.
 */

:root {
  --tk-primary: #ff7a4d;
  --tk-primary-dark: #e8602f;
  --tk-primary-light: #ffe9df;
  --tk-hero-from: #ffb877;
  --tk-hero-to: #ff7a4d;

  --tk-ink: #2b2240;
  --tk-background: #fff6ec;
  --tk-surface: #ffffff;

  --tk-text-primary: #2b2240;
  --tk-text-secondary: #7a7088;
  --tk-text-muted: #aba3b8;
  --tk-text-inverse: #ffffff;

  --tk-border: #f0e6da;
  --tk-border-light: #faf3e9;
  --tk-error: #ef4444;
  --tk-gold: #c8941a;

  /* story.yellowSurface / story.yellowText — the unfilled-placeholder highlight. */
  --tk-yellow-surface: #fff3d1;
  --tk-yellow-text: #8a6b00;

  --tk-space-xs: 4px;
  --tk-space-sm: 8px;
  --tk-space-md: 12px;
  --tk-space-lg: 16px;
  --tk-space-xl: 20px;
  --tk-space-xxl: 24px;
  --tk-space-xxxl: 32px;
  --tk-space-huge: 48px;

  --tk-radius-sm: 8px;
  --tk-radius-md: 12px;
  --tk-radius-lg: 18px;
  --tk-radius-xl: 24px;
  --tk-radius-xxl: 28px;
  --tk-radius-full: 9999px;

  /* Warm brown shadow, never neutral black — shadows.card / shadows.sm in tokens.ts */
  --tk-shadow-card: 0 4px 16px rgba(123, 80, 40, 0.1);
  --tk-shadow-sm: 0 2px 8px rgba(123, 80, 40, 0.08);

  /* Reading measure. The login card's 420px is right for a form and far too narrow for
     continuous prose; ~68 characters is the usual comfortable line for body text. */
  --tk-measure: 68ch;
}