:root {
  /* Brand */
  --kta-red: #C40000;
  --kta-red-deep: #8F0000;
  --kta-red-soft: #FDE8E8;
  --kta-gold: #D4AF37;
  --kta-gold-deep: #A8841A;
  --kta-gold-soft: #F4E6B0;
  --kta-black: #000000;
  --kta-black-deep: #080808;
  --kta-black-soft: #111111;
  --kta-gray-dark: #1A1A1A;
  --kta-gray-medium: #666666;
  --kta-gray-light: #F5F5F5;
  --kta-gray-border: #E5E5E5;
  --kta-white: #FFFFFF;

  /* Semantic (light mode default) */
  --kta-bg: #FFFFFF;
  --kta-bg-alt: var(--kta-gray-light);
  --kta-surface: #FFFFFF;
  --kta-text: var(--kta-black-soft);
  --kta-text-muted: var(--kta-gray-medium);
  --kta-border: var(--kta-gray-border);
  --kta-accent: var(--kta-red);
  --kta-accent-hover: var(--kta-red-deep);
  --kta-accent-soft: var(--kta-red-soft);
  --kta-premium: var(--kta-gold);
  --kta-premium-deep: var(--kta-gold-deep);
  --kta-premium-soft: var(--kta-gold-soft);

  /* Code / developer surfaces are always dark, regardless of page theme */
  --kta-code-bg: #0D0D0F;
  --kta-code-bg-alt: #17171A;
  --kta-code-border: #27272B;
  --kta-code-text: #E5E5E8;
  --kta-code-muted: #8A8A92;

  /* Typography */
  --kta-font-body: "Inter", "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --kta-font-heading: "Sora", "Space Grotesk", var(--kta-font-body);
  --kta-font-code: "JetBrains Mono", "Fira Code", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* Spacing scale */
  --kta-space-1: 0.25rem;
  --kta-space-2: 0.5rem;
  --kta-space-3: 0.75rem;
  --kta-space-4: 1rem;
  --kta-space-5: 1.5rem;
  --kta-space-6: 2rem;
  --kta-space-7: 3rem;
  --kta-space-8: 4rem;
  --kta-space-9: 6rem;
  --kta-space-10: 8rem;

  /* Radius + shadow - restrained, modern */
  --kta-radius-sm: 8px;
  --kta-radius-md: 12px;
  --kta-radius-lg: 20px;
  --kta-radius-full: 999px;
  --kta-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.06), 0 1px 1px rgba(0, 0, 0, 0.04);
  --kta-shadow-md: 0 8px 24px rgba(0, 0, 0, 0.08), 0 2px 6px rgba(0, 0, 0, 0.04);
  --kta-shadow-lg: 0 24px 48px rgba(0, 0, 0, 0.12), 0 8px 16px rgba(0, 0, 0, 0.06);

  /* Motion */
  --kta-ease: cubic-bezier(0.16, 1, 0.3, 1);
  --kta-duration-fast: 150ms;
  --kta-duration: 250ms;
  --kta-duration-slow: 400ms;

  --kta-container: 1200px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --kta-bg: var(--kta-black-deep);
    --kta-bg-alt: var(--kta-black-soft);
    --kta-surface: var(--kta-gray-dark);
    --kta-text: #F5F5F3;
    --kta-text-muted: #A3A3A8;
    --kta-border: #262629;
    --kta-accent-soft: rgba(196, 0, 0, 0.16);
    --kta-premium-soft: rgba(212, 175, 55, 0.16);
  }
}

/* Manual override hook, consistent with the existing body.dark-theme convention */
body.dark-theme {
  --kta-bg: var(--kta-black-deep);
  --kta-bg-alt: var(--kta-black-soft);
  --kta-surface: var(--kta-gray-dark);
  --kta-text: #F5F5F3;
  --kta-text-muted: #A3A3A8;
  --kta-border: #262629;
  --kta-accent-soft: rgba(196, 0, 0, 0.16);
  --kta-premium-soft: rgba(212, 175, 55, 0.16);
}
body.light-theme {
  --kta-bg: #FFFFFF;
  --kta-bg-alt: var(--kta-gray-light);
  --kta-surface: #FFFFFF;
  --kta-text: var(--kta-black-soft);
  --kta-text-muted: var(--kta-gray-medium);
  --kta-border: var(--kta-gray-border);
  --kta-accent-soft: var(--kta-red-soft);
  --kta-premium-soft: var(--kta-gold-soft);
}

:root {
    --shadow1: var(--kta-gray-dark);
    --shadow2: var(--kta-gray-medium);
    --shadow3: var(--kta-gray-light);
    --highlight1: var(--kta-white);
    --highlight2: var(--kta-gray-light);
    --highlight3: var(--kta-gray-medium);
    --color1: linear-gradient(180deg,var(--kta-accent-hover) 10%,var(--kta-accent) 100%); /* lighter color from the theme */
    --color2: var(--kta-accent); /* darker color from the theme */
    --yellow: var(--kta-gold);
    --blue: #63b3e9;
    --green: #64bb64;
    --red: #db2a2a;
    --purple: #e547a1;
    --muted: #d1d1d1;
    --color3: var(--kta-accent-hover);
}

@media (prefers-color-scheme: dark) {
    :root {
        --shadow1: var(--kta-white);
        --shadow2: var(--kta-gray-light);
        --shadow3: var(--kta-gray-medium);
        --highlight1: var(--kta-gray-dark);
        --highlight2: var(--kta-gray-medium);
        --highlight3: var(--kta-gray-light);
    }
}

body.dark-theme {
    --shadow1: var(--kta-white);
    --shadow2: var(--kta-gray-light);
    --shadow3: var(--kta-gray-medium);
    --highlight1: var(--kta-gray-dark);
    --highlight2: var(--kta-gray-medium);
    --highlight3: var(--kta-gray-light);
}