/* styles/themes/kzhukuk/tokens.css
 *
 * kzhukuk's real theme for pattespatte/vanilla-css-design-system (v1.0.2),
 * following the same convention as upstream's themes/legacy/tokens.css:
 * tokens live directly on :root (not gated behind [data-theme="..."]) since
 * kzhukuk is this site's only theme — there is no theme switcher, so there
 * is nothing to gate. This supersedes an earlier version of this file that
 * was written against [data-theme="kzhukuk"] and class names (.card,
 * .nav-menu, .kz-footer, .kz-cta-band) that never matched this theme's
 * actual markup and was never linked from anywhere — see
 * partials/header.php for where this is now actually loaded, right after
 * public/assets/kzhukuk/css/vendor-vanilla-css.css.
 *
 * Values are aliases onto the theme's own :root tokens already defined in
 * partials/header.php (--black, --ink, --line, --space-*, --color-success/
 * -danger, etc. — sourced from DESIGN_SYSTEM.md / the real WP theme). This
 * file does not invent new colors; it just exposes them under the names
 * the vendored framework components expect, using var() so a future edit
 * to those source tokens automatically flows through here too.
 *
 * Deliberately NOT redefined here: --shadow-sm/-md/-lg and --spacing-1..5.
 * The shadow tokens already exist under the same names in header.php's
 * :root and are loaded after this file, so they'd just be overwritten —
 * defining them here too would be dead, confusing code. The framework's
 * own --spacing-1..5 scale is left at its upstream default: it only
 * affects framework component padding (buttons/forms/alerts), and
 * theme.css overrides that padding explicitly to match this site's
 * existing --space-* scale, so --spacing-1..5's value never surfaces.
 */

:root {
  /* Primary — brand is deliberately monochrome (no accent color, see
     DESIGN_SYSTEM.md), so "primary" is black/ink, not a hue. */
  --color-primary: var(--black);
  --color-primary-50: var(--color-gray-50);
  --color-primary-100: var(--color-gray-100);
  --color-primary-200: var(--color-gray-200);
  --color-primary-300: var(--color-gray-300);
  --color-primary-400: var(--color-gray-400);
  --color-primary-500: var(--black);
  --color-primary-600: var(--color-gray-700);
  --color-primary-700: var(--color-gray-800);
  --color-primary-800: var(--color-gray-800);
  --color-primary-900: var(--black);

  /* Secondary — no second brand hue either; same monochrome family, one
     step lighter than primary so .btn-secondary reads as "quieter". */
  --color-secondary: var(--color-gray-600);
  --color-secondary-100: var(--color-gray-100);
  --color-secondary-200: var(--color-gray-200);

  /* Semantic feedback colors — --color-success/--color-error are new names
     the framework expects; --color-success/--color-danger themselves are
     already defined (with the real values) in partials/header.php's :root,
     loaded after this file, so they don't need (and must not get) a
     circular re-definition here. Only the *-100/-200 tint names, which
     don't already exist under those names, are aliased here. */
  --color-success-100: var(--color-success-bg);
  --color-success-200: var(--color-success-bg);
  --color-error: var(--color-danger);
  --color-error-100: var(--color-danger-bg);
  --color-error-200: var(--color-danger-bg);
  --color-warning: #b45309;
  --color-warning-100: #fffbeb;
  --color-warning-200: #fef3c7;
  --color-info: var(--black);
  --color-info-100: var(--color-gray-100);
  --color-info-200: var(--color-gray-200);

  /* Surface aliases */
  --color-light: var(--faint);
  --color-muted: var(--grey);
  --color-dark: var(--ink);
  --color-white: #fff;
  --color-black: var(--black);
  --color-bg: #fff;
  --color-text: var(--ink);

  /* Gray scale — built from the site's existing neutral tokens
     (--faint/--light/--line/--icon-circle/--grey/--dark-band/--black,
     already extracted from the real WP theme) rather than a new,
     unrelated ramp. --color-gray-400 is what the framework's own
     --border-color resolves to (variables/borders.css), so this is what
     actually draws every vendored input/button border. */
  --color-gray-50: var(--faint);
  --color-gray-100: var(--light);
  --color-gray-200: var(--light);
  --color-gray-300: var(--line);
  --color-gray-400: var(--line);
  --color-gray-500: var(--icon-circle);
  --color-gray-600: var(--grey);
  --color-gray-700: var(--grey);
  --color-gray-800: var(--dark-band);
  --color-gray-900: var(--black);

  /* Typography — the framework's own font-family/size tokens. h1-h6 sizing
     itself is intentionally left to the existing fluid clamp() rules in
     partials/header.php (loaded after this file, so they win the cascade
     on their own — no override needed here, see theme.css's header comment
     for the full reasoning). */
  --font-family-base: "Libre Franklin", system-ui, -apple-system, Roboto, Arial, sans-serif;
  --text-size-sm: 0.875rem;
  --text-size-base: var(--text-base);
  --text-size-lg: var(--text-lg);
  --text-weight-regular: var(--text-weight-base); /* fixes an upstream typo:
    components/buttons.css and forms.css reference --text-weight-regular,
    which upstream never actually defines (the real name is
    --text-weight-base) — silently invalid without this alias. */

  /* Square brand: buttons/cards/forms all render with 0 border-radius per
     DESIGN_SYSTEM.md — overrides the framework's default
     var(--spacing-1) (0.25rem, rounded) corners. */
  --border-radius: 0;
}