:root {
  /* Typography */
  --k-font-sans: "Ubuntu", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  /* Type scale */
  --k-fs-h2: 4.8rem;
  --k-fs-h3: 2.9326rem;
  --k-fs-h4: 2rem;
  --k-fs-m: 2rem;
  --k-fs-s: 1.6rem;
  --k-fs-xs: 1.3rem;

  /* Spacing */
  --k-space-l: 4.5rem;
  --k-space-m: 3rem;
  --k-space-section-s: 5rem;

  /* Radius */
  --k-radius-sm: 10px;
  --k-radius-md: 12px;
  --k-radius: 20px;
  --k-radius-pill: 999px;

  /* Motion */
  --k-transition-fast: 150ms ease;

  /* Text */
  --k-text-primary: var(--brand-text);
  --k-text-secondary: var(--brand-muted);
  --k-text-inverse: var(--brand-on-primary);
  --k-text-placeholder: color-mix(in srgb, var(--brand-muted) 90%, transparent);
  --k-text-soft-inverse: color-mix(in srgb, var(--brand-muted) 10%, var(--brand-surface));
  --k-text-soft-inverse-strong: color-mix(in srgb, var(--brand-muted) 10%, var(--brand-surface));

  /* Surfaces */
  --k-surface-page: var(--brand-bg);
  --k-surface-base: var(--brand-surface);
  --k-surface-elevated: var(--brand-surface);
  --k-surface-soft: var(--brand-surface-soft);

  /* Brand */
  --k-brand-primary: var(--brand-primary);
  --k-brand-strong: var(--brand-primary);
  --k-brand-hover: var(--brand-primary-hover);
  --k-brand-hover-to: var(--brand-primary-hover);

  /* Accent */
  --k-accent-base: var(--brand-accent);
  --k-accent-strong: var(--brand-primary);
  --k-accent-soft: color-mix(in srgb, var(--k-accent-base) 16%, var(--brand-on-contrast));
  --k-accent-divider: color-mix(in srgb, var(--brand-primary) 34%, transparent);

  /* Semantic */
  --k-sem-success: var(--brand-success);
  --k-sem-warning: var(--brand-warning);
  --k-sem-danger: var(--brand-error);
  --k-sem-info: var(--brand-info);

  --k-sem-success-ink: var(--k-sem-success);
  --k-sem-warning-ink: var(--k-sem-warning);
  --k-sem-danger-ink: var(--k-sem-danger);
  --k-sem-info-ink: var(--k-sem-info);

  --k-sem-success-bg: color-mix(in srgb, var(--k-sem-success) 10%, var(--brand-surface));
  --k-sem-success-border: color-mix(in srgb, var(--k-sem-success) 26%, var(--brand-surface));
  --k-sem-warning-bg: color-mix(in srgb, var(--k-sem-warning) 12%, var(--brand-surface));
  --k-sem-warning-border: color-mix(in srgb, var(--k-sem-warning) 30%, var(--brand-surface));
  --k-sem-danger-bg: color-mix(in srgb, var(--k-sem-danger) 10%, var(--brand-surface));
  --k-sem-danger-border: color-mix(in srgb, var(--k-sem-danger) 24%, var(--brand-surface));
  --k-sem-info-bg: color-mix(in srgb, var(--k-sem-info) 10%, var(--brand-surface));
  --k-sem-info-border: color-mix(in srgb, var(--k-sem-info) 24%, var(--brand-surface));

  --k-status-valid: var(--k-sem-success);
  --k-status-wallet: var(--brand-info);
  --k-status-warning: var(--k-sem-warning);
  --k-status-neutral: var(--brand-muted);

  /* Decorative */
  --k-deco-primary: var(--k-accent-base);
  --k-deco-strong: var(--k-accent-strong);
  --k-deco-chip-border: color-mix(in srgb, var(--k-accent-base) 30%, var(--brand-surface));
  --k-deco-chip-bg: color-mix(in srgb, var(--k-accent-base) 12%, transparent);
  --k-deco-chip-text: color-mix(in srgb, var(--k-accent-strong) 88%, var(--brand-on-contrast));

  /* Shadows */
  --k-shadow-soft: 0 8px 18px color-mix(in srgb, var(--brand-shadow) 8%, transparent);
  --k-shadow-soft-hover: 0 10px 24px color-mix(in srgb, var(--brand-shadow) 12%, transparent);
  --k-shadow-card: 0 24px 52px color-mix(in srgb, var(--brand-shadow) 14%, transparent);
  --k-shadow-modal: 0 20px 50px color-mix(in srgb, var(--brand-shadow) 28%, transparent);
  --k-shadow-xs: 0 1px 3px color-mix(in srgb, var(--brand-shadow) 5%, transparent);

  /* Overlays */
  --k-overlay-strong: color-mix(in srgb, var(--brand-shadow) 58%, transparent);
  --k-overlay-backdrop-strong: color-mix(in srgb, var(--brand-shadow) 70%, transparent);
  --k-overlay-backdrop-soft: color-mix(in srgb, var(--brand-shadow) 50%, transparent);
  --k-overlay-head-from: color-mix(in srgb, var(--k-brand-primary) 12%, transparent);
  --k-overlay-head-to: color-mix(in srgb, var(--k-brand-strong) 78%, transparent);
  --k-pass-overlay-accent: color-mix(in srgb, var(--k-accent-base) 16%, transparent);
  --k-pass-overlay-contrast: color-mix(in srgb, var(--brand-shadow) 50%, transparent);
  --k-pass-text-shadow: 0 1px 2px color-mix(in srgb, var(--brand-shadow) 40%, transparent);

  /* Glass */
  --k-glass-pass-bg: color-mix(in srgb, var(--brand-contrast) 72%, transparent);
  --k-glass-pass-border: color-mix(in srgb, var(--brand-surface) 12%, transparent);
  --k-glass-pass-border-hover: color-mix(in srgb, var(--brand-surface) 20%, transparent);
  --k-glass-border-soft: color-mix(in srgb, var(--brand-surface) 18%, transparent);
  --k-glass-surface-soft: color-mix(in srgb, var(--brand-contrast) 45%, transparent);

  /* Inputs */
  --k-input-bg: var(--brand-surface);
  --k-input-text: var(--brand-text);
  --k-input-border: var(--brand-border);
  --k-input-border-focus: var(--brand-primary);
  --k-input-focus-ring: color-mix(in srgb, var(--brand-info) 18%, transparent);
  --k-input-focus-ring-soft: color-mix(in srgb, var(--brand-primary) 10%, transparent);
  --k-input-glass-bg: color-mix(in srgb, var(--brand-surface) 60%, transparent);
  --k-input-glass-border: color-mix(in srgb, var(--brand-surface) 40%, transparent);
  --k-input-glass-text: color-mix(in srgb, var(--brand-on-contrast) 88%, transparent);

  /* Rings */
  --k-ring-success: color-mix(in srgb, var(--brand-success) 16%, transparent);
  --k-ring-info: color-mix(in srgb, var(--brand-info) 16%, transparent);
  --k-ring-warning: color-mix(in srgb, var(--brand-warning) 18%, transparent);

  /* Page glow */
  --k-page-glow-1: color-mix(in srgb, var(--brand-surface-soft) 10%, var(--brand-surface));
  --k-page-glow-2: color-mix(in srgb, var(--brand-surface-soft) 10%, var(--brand-surface));
  --k-page-glow-3: color-mix(in srgb, var(--brand-surface) 10%, var(--brand-surface));
  --k-page-glow-fade-1: color-mix(in srgb, var(--brand-surface-soft) 10%, var(--brand-surface));
  --k-page-glow-fade-2: color-mix(in srgb, var(--brand-surface-soft) 10%, var(--brand-surface));

  /* Auth */
  --k-auth-bg-from: var(--brand-surface);
  --k-auth-bg-to: var(--brand-surface-soft);
  --k-auth-glow: color-mix(in srgb, var(--brand-contrast) 8%, transparent);
  --k-auth-shadow: 0 24px 46px color-mix(in srgb, var(--brand-shadow) 14%, transparent);
  --k-auth-border-soft: color-mix(in srgb, var(--brand-info) 60%, transparent);
  --k-auth-border-hover: color-mix(in srgb, var(--brand-muted) 90%, transparent);

  /* Platform + primitives */
  --k-apple-bg: var(--brand-black);
  --k-apple-bg-hover: var(--brand-contrast);
  --k-link-primary: var(--brand-primary);
  --k-link-primary-strong: var(--brand-primary-hover);
  --k-line: var(--brand-border);
  --k-white: var(--brand-white);
  --k-surface-contrast: var(--brand-black);

  /* Compatibility aliases still in templates */
  --k-bg: var(--k-surface-page);
  --k-surface: var(--k-surface-base);
  --k-ink: var(--k-text-primary);
  --k-muted: var(--k-text-secondary);
  --k-brand: var(--k-brand-strong);
  --k-brand-2: var(--k-brand-primary);
  --k-accent: var(--k-accent-base);
}