:root {
  /* Brand */
  --kl-primary: #D85A30;
  --kl-primary-hover: #c04e28;
  --kl-primary-soft: rgba(216, 90, 48, 0.16);

  /* Surfaces — cinematic dark */
  --kl-bg: #0E0E12;
  --kl-surface: #16161C;
  --kl-surface-2: #1E1E26;
  --kl-surface-3: #262631;
  --kl-overlay: rgba(0, 0, 0, 0.55);

  /* Text */
  --kl-text: #F2F2F5;
  --kl-text-muted: #9A9AA8;
  --kl-text-dim: #5E5E6E;

  /* Borders / dividers */
  --kl-border: rgba(255, 255, 255, 0.08);
  --kl-border-strong: rgba(255, 255, 255, 0.16);

  /* Status */
  --kl-success: #34C77B;
  --kl-warning: #F0B429;
  --kl-error: #E5484D;

  /* Layout — fixed bars */
  --kl-tabbar-h: 60px;
  --kl-playerbar-h: 72px;

  /* Safe area insets (iOS notch + home indicator, Android gesture bar) */
  --kl-safe-top: env(safe-area-inset-top, 0px);
  --kl-safe-right: env(safe-area-inset-right, 0px);
  --kl-safe-bottom: env(safe-area-inset-bottom, 0px);
  --kl-safe-left: env(safe-area-inset-left, 0px);

  /* Typography */
  --kl-font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI",
             Roboto, "Helvetica Neue", Arial, sans-serif;
  --kl-fs-xs: 11px;
  --kl-fs-sm: 13px;
  --kl-fs-md: 15px;
  --kl-fs-lg: 18px;
  --kl-fs-xl: 22px;
  --kl-fs-2xl: 28px;
  --kl-fs-3xl: 34px;

  --kl-fw-regular: 400;
  --kl-fw-medium: 500;
  --kl-fw-semibold: 600;
  --kl-fw-bold: 700;

  --kl-lh-tight: 1.2;
  --kl-lh-normal: 1.45;

  /* Radius */
  --kl-radius-sm: 6px;
  --kl-radius-md: 10px;
  --kl-radius-lg: 16px;
  --kl-radius-xl: 24px;
  --kl-radius-pill: 999px;

  /* Spacing */
  --kl-sp-1: 4px;
  --kl-sp-2: 8px;
  --kl-sp-3: 12px;
  --kl-sp-4: 16px;
  --kl-sp-5: 20px;
  --kl-sp-6: 24px;
  --kl-sp-8: 32px;
  --kl-sp-10: 40px;

  /* Min touch target — Apple HIG / Material */
  --kl-touch: 44px;

  /* Motion */
  --kl-ease: cubic-bezier(0.2, 0, 0, 1);
  --kl-dur-fast: 120ms;
  --kl-dur-base: 200ms;
}