:root {
  /* Background Colors */
  --kf-bg: #fdfafa;
  --kf-bg-surface: #f7f4f4;
  --kf-bg-dark: #000;
  --kf-bg-invert: #121214;

  /* Text Colors */
  --kf-text-primary: #18181b;
  --kf-text-secondary: #3f3f46;
  --kf-text-tertiary: #71717a;
  --kf-text-muted: var(--kf-white-3);
  --kf-text-invert: var(--kf-white-10);

  /* Accent Colors */
  --kf-accent-color: #e50914;
  --kf-accent-50: #fef2f2;
  --kf-accent-100: #fcdcee;
  --kf-accent-600: #b20710;

  /* Border Colors */
  --kf-border-color: #09090b;
  --kf-border-subtle: #d4d4d8;
  --kf-border-accent: var(--kf-accent-color);
  --kf-border-invert: #3f3f46;

  /* System Colors */
  --kf-success: #22c55e;
  --kf-warning: #f59e0b;
  --kf-error: #ef4444;
  --kf-info: #3b82f6;

  /* Opacity Colors */
  /* -- Bg Colors -- */
  --kf-bg-rgb: 253, 250, 250;
  --kf-bg-dark-rgb: 26, 26, 26;
  --kf-bg-invert-rgb: 26, 26, 30;

  /* -- Text Colors -- */
  --kf-text-primary-rgb: 24, 24, 27;
  --kf-text-secondary-rgb: 63, 63, 70;

  /* -- Accent Colors -- */
  --kf-black-rgb: 10, 10, 10;

  /* -- Color: White -- */
  --kf-white-rgb: 255, 255, 255;
  --kf-white-0: rgba(var(--kf-white-rgb), 0.05);
  --kf-white-1: rgba(var(--kf-white-rgb), 0.1);
  --kf-white-2: rgba(var(--kf-white-rgb), 0.2);
  --kf-white-3: rgba(var(--kf-white-rgb), 0.3);
  --kf-white-4: rgba(var(--kf-white-rgb), 0.4);
  --kf-white-5: rgba(var(--kf-white-rgb), 0.5);
  --kf-white-6: rgba(var(--kf-white-rgb), 0.6);
  --kf-white-7: rgba(var(--kf-white-rgb), 0.7);
  --kf-white-8: rgba(var(--kf-white-rgb), 0.8);
  --kf-white-9: rgba(var(--kf-white-rgb), 0.95);
  --kf-white-10: rgba(var(--kf-white-rgb), 1);

  /* -- Color: Black -- */
  --kf-black-rgb: 0, 0, 0;
  --kf-black-0: rgba(var(--kf-black-rgb), 0.05);
  --kf-black-1: rgba(var(--kf-black-rgb), 0.1);
  --kf-black-2: rgba(var(--kf-black-rgb), 0.2);
  --kf-black-3: rgba(var(--kf-black-rgb), 0.3);
  --kf-black-4: rgba(var(--kf-black-rgb), 0.4);
  --kf-black-5: rgba(var(--kf-black-rgb), 0.5);
  --kf-black-6: rgba(var(--kf-black-rgb), 0.6);
  --kf-black-7: rgba(var(--kf-black-rgb), 0.7);
  --kf-black-8: rgba(var(--kf-black-rgb), 0.8);
  --kf-black-9: rgba(var(--kf-black-rgb), 0.95);
  --kf-black-10: rgba(var(--kf-black-rgb), 1);

  /* -- Color: Accent -- */
  --kf-accent-rgb: 229, 9, 20;
  --kf-accent-0: rgba(var(--kf-accent-rgb), 0.05);
  --kf-accent-1: rgba(var(--kf-accent-rgb), 0.1);
  --kf-accent-2: rgba(var(--kf-accent-rgb), 0.2);
  --kf-accent-3: rgba(var(--kf-accent-rgb), 0.3);
  --kf-accent-4: rgba(var(--kf-accent-rgb), 0.4);
  --kf-accent-5: rgba(var(--kf-accent-rgb), 0.5);
  --kf-accent-6: rgba(var(--kf-accent-rgb), 0.6);
  --kf-accent-7: rgba(var(--kf-accent-rgb), 0.7);
  --kf-accent-8: rgba(var(--kf-accent-rgb), 0.8);
  --kf-accent-9: rgba(var(--kf-accent-rgb), 0.95);
  --kf-accent-10: rgba(var(--kf-accent-rgb), 1);

  /* -- Color: Gold -- */
  --kf-gold-rgb: 212, 168, 67;
  --kf-gold-0: rgba(var(--kf-gold-rgb), 0.05);
  --kf-gold-1: rgba(var(--kf-gold-rgb), 0.1);
  --kf-gold-2: rgba(var(--kf-gold-rgb), 0.2);
  --kf-gold-3: rgba(var(--kf-gold-rgb), 0.3);
  --kf-gold-4: rgba(var(--kf-gold-rgb), 0.4);
  --kf-gold-5: rgba(var(--kf-gold-rgb), 0.5);
  --kf-gold-6: rgba(var(--kf-gold-rgb), 0.6);
  --kf-gold-7: rgba(var(--kf-gold-rgb), 0.7);
  --kf-gold-8: rgba(var(--kf-gold-rgb), 0.8);
  --kf-gold-9: rgba(var(--kf-gold-rgb), 0.95);
  --kf-gold-10: rgba(var(--kf-gold-rgb), 1);

  /* -- Color: Warning -- */
  --kf-warning-rgb: 245, 158, 11;
  --kf-warning-0: rgba(var(--kf-warning-rgb), 0.05);
  --kf-warning-1: rgba(var(--kf-warning-rgb), 0.1);
  --kf-warning-2: rgba(var(--kf-warning-rgb), 0.2);
  --kf-warning-3: rgba(var(--kf-warning-rgb), 0.3);
  --kf-warning-4: rgba(var(--kf-warning-rgb), 0.4);
  --kf-warning-5: rgba(var(--kf-warning-rgb), 0.5);
  --kf-warning-6: rgba(var(--kf-warning-rgb), 0.6);
  --kf-warning-7: rgba(var(--kf-warning-rgb), 0.7);
  --kf-warning-8: rgba(var(--kf-warning-rgb), 0.8);
  --kf-warning-9: rgba(var(--kf-warning-rgb), 0.95);
  --kf-warning-10: rgba(var(--kf-warning-rgb), 1);

  /* -- Color: Info -- */
  --kf-info-rgb: 59, 130, 246;
  --kf-info-0: rgba(var(--kf-info-rgb), 0.05);
  --kf-info-1: rgba(var(--kf-info-rgb), 0.1);
  --kf-info-2: rgba(var(--kf-info-rgb), 0.2);
  --kf-info-3: rgba(var(--kf-info-rgb), 0.3);
  --kf-info-4: rgba(var(--kf-info-rgb), 0.4);
  --kf-info-5: rgba(var(--kf-info-rgb), 0.5);
  --kf-info-6: rgba(var(--kf-info-rgb), 0.6);
  --kf-info-7: rgba(var(--kf-info-rgb), 0.7);
  --kf-info-8: rgba(var(--kf-info-rgb), 0.8);
  --kf-info-9: rgba(var(--kf-info-rgb), 0.95);
  --kf-info-10: rgba(var(--kf-info-rgb), 1);

  /* -- Border Colors -- */
  --kf-border-subtle-rgb: 212, 212, 216;
  --kf-border-accent-rgb: var(--kf-accent-color-rgb);
  --kf-border-dark-rgb: 9, 9, 11;

  /* -- System Colors -- */
  --kf-succcess-rgb: 34, 197, 94;
  --kf-error-rgb: 239, 68, 68;

  /* Font Family */
  --kf-font: "GeneralSans", sans-serif;

  /* Font Size */
  --kf-fs-3xs: clamp(0.625rem, 0.598rem + 0.13vw, 0.6875rem);
  --kf-fs-2xs: clamp(0.75rem, 0.723rem + 0.13vw, 0.8125rem);
  --kf-fs-xs: clamp(1rem, 0.5vw + 0.9rem, 1.2rem);
  --kf-fs-sm: clamp(1.4rem, 0.4vw + 1.2rem, 1.6rem);
  --kf-fs-md: clamp(1.6rem, 0.6vw + 1.4rem, 2.4rem);
  --kf-fs-lg: clamp(1.8rem, 1vw + 1.5rem, 3.2rem);
  --kf-fs-xl: clamp(2.4rem, 1.5vw + 1.8rem, 4.8rem);
  --kf-fs-2xl: clamp(3.2rem, 2.5vw + 2rem, 6.4rem);
  --kf-fs-3xl: clamp(4rem, 3.5vw + 2.5rem, 8rem);
  --kf-fs-4xl: clamp(4.8rem, 5vw + 3rem, 15rem);

  /* Font Weight */
  --kf-fw-thin: 300;
  --kf-fw-regular: 400;
  --kf-fw-medium: 500;
  --kf-fw-semibold: 600;
  --kf-fw-bold: 700;

  /* Letter Spacing */
  --kf-ls-sm: -0.04rem;
  --kf-ls-md: -0.02rem;
  --kf-ls-lg: 0.02rem;
  --kf-ls-xl: 0.04rem;
  --kf-ls-xll: 0.2rem;
  --kf-ls-3xl: 2rem;

  /* Text Transform */
  --kf-tc: capitalize;
  --kf-tu: uppercase;

  /* Border Radius */
  --kf-rs: 0.8rem;
  --kf-rm: 1.2rem;
  --kf-rl: 2.4rem;
  --kf-rxl: 50%;

  /* Border Tokens */
  --kf-border-default: 0.1rem solid var(--kf-border-subtle);
  --kf-border-accent: 0.1rem solid var(--kf-border-accent);
  --kf-border-dark: 0.1rem solid var(--kf-border-color);
  --kf-border-sm-white: 0.1rem solid var(--kf-white-0);

  /* Space Tokens */
  --kf-space-sm: clamp(1.2rem, 1.5vw, 1.6rem);
  --kf-space-md: clamp(2.4rem, 3vw, 3.2rem);
  --kf-space-lg: clamp(4.8rem, 6vw, 8rem);
  --kf-space-xl: clamp(6.4rem, 8vw, 12rem);

  /* Page Max Width */
  --kf-page-width: 1400px;

  /* Active Effect */
  /* -- Cubic Bezier Tokens -- */
  --kf-ease: cubic-bezier(0.25, 0.1, 0.25, 1);
  --kf-ease-in: cubic-bezier(0.42, 0, 1, 1);
  --kf-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --kf-ease-in-out: cubic-bezier(0.76, 0, 0.24, 1);
  /* -- Duration Tokens -- */
  --kf-dt-fast: 0.2s;
  --kf-dt-base: 0.35s;
  --kf-dt-slow: 0.45s;
  --kf-dt-focus: 0.6s;

  /* -- Click Effect Tokens -- */
  --kf-click-effect: scale(0.95);
}

/* -- Custom Fonts --*/
@font-face {
  font-family: "GeneralSans";
  src: url("../fonts/GeneralSans-Variable.woff2") format("woff2-variations");
  font-weight: 200 700;
  font-display: swap;
}

/* -- System Settings -- */
* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

html {
  font-size: 62.5%;
  -webkit-text-size-adjust: 100%;
}

body {
  background-color: var(--kf-bg-dark);
  font-family: var(--kf-font);
  font-weight: var(--kf-fw-regular);
  color: var(--kf-text-primary);
  line-height: 1.5;
}

section,
article {
  background: var(--kf-bg-dark);
}

h1,
h2,
h3,
h4 {
  font-weight: var(--kf-fw-bold);
  letter-spacing: var(--kf-ls-md);
  text-transform: var(--kf-tu);
}

a {
  text-decoration: none;
  font-size: var(--kf-fs-md);
  font-weight: var(--kf-fw-medium);
  letter-spacing: var(--kf-ls-md);
  color: var(--kf-text-primary);
  text-transform: var(--kf-tu);
}

li,
ul {
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--kf-space-md);
}

button {
  border: none;
  align-items: center;
  background: none;
  display: flex;
  justify-content: center;
}

.page-width {
  width: var(--kf-page-width);
  margin: 0 auto;
}

.container {
  width: calc(var(--kf-page-width) * 1.2);
  margin: 0 auto;
  padding: 0 var(--kf-space-md);
}

img {
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
}