:root {
  /* ---- COLORS ---- */
  /* KSS Primary */
  --kss-primary-surface: #ffe3d2;
  --kss-primary-hover: #fea16a;
  --kss-primary-main: #fe8944;
  --kss-primary-border: #fe721f;
  --kss-primary-pressed: #d45f1a;

  /* KSS Secondary */
  --kss-secondary-surface: #edffd4;
  --kss-secondary-hover: #c3fa71;
  --kss-secondary-main: #a5f72a;
  --kss-secondary-border: #89ce23;
  --kss-secondary-pressed: #6ea51c;

  /* Neutral Light */
  --neutral-light-50: #fafafa;
  --neutral-light-100: #f5f5f5;
  --neutral-light-200: #e5e5e5;
  --neutral-light-300: #d4d4d4;
  --neutral-light-400: #a3a3a3;
  --neutral-light-500: #737373;
  --neutral-light-600: #525252;
  --neutral-light-700: #404040;
  --neutral-light-800: #262626;
  --neutral-light-900: #171717;
  --neutral-light-950: #0a0a0a;

  /* Neutral Dark */
  --neutral-dark-50: #020617;
  --neutral-dark-100: #0f172a;
  --neutral-dark-200: #1f2937;
  --neutral-dark-300: #334155;
  --neutral-dark-400: #475569;
  --neutral-dark-500: #64748b;
  --neutral-dark-600: #94a3b8;
  --neutral-dark-700: #cbd5e1;
  --neutral-dark-800: #e2e8f0;
  --neutral-dark-900: #f1f5f9;
  --neutral-dark-950: #f8fafc;

  /* Warning */
  --warning-surface: #ffe4e6;
  --warning-hover: #fb7185;
  --warning-main: #f43f5e;
  --warning-border: #e11d48;
  --warning-pressed: #be123c;

  /* Success */
  --success-surface: #dcfce7;
  --success-hover: #4ade80;
  --success-main: #22c55e;
  --success-border: #16a34a;
  --success-pressed: #15803d;

  /* KDS Primary */
  --kds-primary-surface: #ffe2e2;
  --kds-primary-hover: #f87171;
  --kds-primary-main: #ef4444;
  --kds-primary-border: #dc2626;
  --kds-primary-pressed: #b91c1c;

  /* Zynergy Primary */
  --zynergy-primary-surface: #ccd5eb;
  --zynergy-primary-hover: #8096cd;
  --zynergy-primary-main: #0029c9;
  --zynergy-primary-border: #2a50ac;
  --zynergy-primary-pressed: #002582;

  /* Zynergy Secondary */
  --zynergy-secondary-surface: #d8f8f7;
  --zynergy-secondary-hover: #7ee7e6;
  --zynergy-secondary-main: #3ddbd9;
  --zynergy-secondary-border: #50d4d2;
  --zynergy-secondary-pressed: #33b6b5;

  /* General */
  --background: #ffffff;
  --foreground: #111827;
  --white: #ffffff;
  --black: #000000;

  /* ---- TYPOGRAPHY ---- */
  --font-family-body: "Poppins", sans-serif;
  --font-family-heading: "Poppins", sans-serif;

  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  /* Body */
  --font-size-body-xs: 12px;    --line-height-body-xs: 18px;    --letter-spacing-body-xs: 0.005em;
  --font-size-body-small: 14px; --line-height-body-small: 20px; --letter-spacing-body-small: 0.005em;
  --font-size-body-base: 16px;  --line-height-body-base: 22px;  --letter-spacing-body-base: 0.005em;
  --font-size-body-large: 18px; --line-height-body-large: 24px; --letter-spacing-body-large: 0.005em;
  --font-size-body-xl: 20px;    --line-height-body-xl: 26px;    --letter-spacing-body-xl: 0.005em;
  --font-size-body-2xl: 22px;   --line-height-body-2xl: 28px;   --letter-spacing-body-2xl: 0.005em;
  --font-size-body-3xl: 24px;   --line-height-body-3xl: 30px;   --letter-spacing-body-3xl: 0.005em;

  /* Heading */
  --font-size-heading-xs: 20px;   --line-height-heading-xs: 30px;   --letter-spacing-heading-xs: 0.005em;
  --font-size-heading-small: 22px; --line-height-heading-small: 32px; --letter-spacing-heading-small: 0.005em;
  --font-size-heading-base: 24px;  --line-height-heading-base: 34px;  --letter-spacing-heading-base: 0.005em;
  --font-size-heading-large: 26px; --line-height-heading-large: 36px; --letter-spacing-heading-large: 0.005em;
  --font-size-heading-xl: 28px;    --line-height-heading-xl: 40px;    --letter-spacing-heading-xl: 0.005em;
  --font-size-heading-2xl: 30px;   --line-height-heading-2xl: 44px;   --letter-spacing-heading-2xl: 0.005em;
  --font-size-heading-3xl: 32px;   --line-height-heading-3xl: 46px;   --letter-spacing-heading-3xl: 0.005em;
  --font-size-heading-4xl: 34px;   --line-height-heading-4xl: 48px;   --letter-spacing-heading-4xl: 0.005em;
  --font-size-heading-5xl: 36px;   --line-height-heading-5xl: 50px;   --letter-spacing-heading-5xl: 0.005em;
  --font-size-heading-6xl: 38px;   --line-height-heading-6xl: 52px;   --letter-spacing-heading-6xl: 0.005em;
  --font-size-heading-7xl: 40px;   --line-height-heading-7xl: 54px;   --letter-spacing-heading-7xl: 0.005em;

  /* ---- BORDER RADIUS ---- */
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-2xl: 24px;
  --radius-full: 9999px;

  /* ---- SHADOWS ---- */
  /* Box shadow */
  --shadow-2xs: 0px 1px 0px 0px #0000000D;
  --shadow-xs: 0px 1px 2px 0px #0000000D;
  --shadow-sm: 0px 1px 2px -1px #0000001A, 0px 1px 3px 0px #0000001A;
  --shadow-md: 0px 2px 4px -2px #0000001A, 0px 4px 6px -1px #0000001A;
  --shadow-lg: 0px 4px 6px -4px #0000001A, 0px 10px 15px -3px #0000001A;
  --shadow-xl: 0px 8px 10px -6px #0000001A, 0px 20px 25px -5px #0000001A;
  --shadow-2xl: 0px 25px 50px -12px #00000040;

  /* Drop shadow */
  --drop-shadow-xs: 0px 1px 1px #0000000D;
  --drop-shadow-sm: 0px 1px 2px #00000026;
  --drop-shadow-md: 0px 3px 3px #0000001F;
  --drop-shadow-lg: 0px 4px 4px #00000026;
  --drop-shadow-xl: 0px 9px 7px #0000001A;
  --drop-shadow-2xl: 0px 25px 25px #00000026;

  /* Inner shadow */
  --inset-shadow-2xs: inset 0px 1px 0px 0px #0000000D;
  --inset-shadow-xs: inset 0px 1px 1px 0px #0000000D;
  --inset-shadow-sm: inset 0px 2px 4px 0px #0000000D;

  /* ---- CONTAINER ---- */
  --container-max-width: 1280px;
  --container-padding: 24px;
}

/* ---- Responsive container padding ---- */
@media (max-width: 1024px) {
  :root { --container-padding: 20px; }
}
@media (max-width: 768px) {
  :root { --container-padding: 16px; }
}

/* BASE STYLES */
* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  height: 100%;
}

body {
  height: 100%;
  margin: 0;
  background: var(--background);
  color: var(--foreground);
  font-family: var(--font-family-body);
  font-weight: var(--font-weight-regular);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
  margin: 0;
  padding: 0;
  font-family: var(--font-family-heading);
  font-weight: var(--font-weight-regular);
  letter-spacing: 0.005em;
}

p { margin: 0; }

a { color: inherit; text-decoration: none; }

button, input, textarea, select { font: inherit; }

img, picture, video, canvas, svg { display: block; max-width: 100%; }

/* HEADING SIZE UTILITIES */
.heading-xs    { font-size: var(--font-size-heading-xs);    line-height: var(--line-height-heading-xs);    letter-spacing: var(--letter-spacing-heading-xs); }
.heading-small { font-size: var(--font-size-heading-small); line-height: var(--line-height-heading-small); letter-spacing: var(--letter-spacing-heading-small); }
.heading-base  { font-size: var(--font-size-heading-base);  line-height: var(--line-height-heading-base);  letter-spacing: var(--letter-spacing-heading-base); }
.heading-large { font-size: var(--font-size-heading-large); line-height: var(--line-height-heading-large); letter-spacing: var(--letter-spacing-heading-large); }
.heading-xl    { font-size: var(--font-size-heading-xl);    line-height: var(--line-height-heading-xl);    letter-spacing: var(--letter-spacing-heading-xl); }
.heading-2xl   { font-size: var(--font-size-heading-2xl);   line-height: var(--line-height-heading-2xl);   letter-spacing: var(--letter-spacing-heading-2xl); }
.heading-3xl   { font-size: var(--font-size-heading-3xl);   line-height: var(--line-height-heading-3xl);   letter-spacing: var(--letter-spacing-heading-3xl); }
.heading-4xl   { font-size: var(--font-size-heading-4xl);   line-height: var(--line-height-heading-4xl);   letter-spacing: var(--letter-spacing-heading-4xl); }
.heading-5xl   { font-size: var(--font-size-heading-5xl);   line-height: var(--line-height-heading-5xl);   letter-spacing: var(--letter-spacing-heading-5xl); }
.heading-6xl   { font-size: var(--font-size-heading-6xl);   line-height: var(--line-height-heading-6xl);   letter-spacing: var(--letter-spacing-heading-6xl); }
.heading-7xl   { font-size: var(--font-size-heading-7xl);   line-height: var(--line-height-heading-7xl);   letter-spacing: var(--letter-spacing-heading-7xl); }

/* FONT WEIGHT UTILITIES */
.font-regular  { font-weight: var(--font-weight-regular); }
.font-medium   { font-weight: var(--font-weight-medium); }
.font-semibold { font-weight: var(--font-weight-semibold); }
.font-bold     { font-weight: var(--font-weight-bold); }

/* BODY TYPOGRAPHY UTILITIES */
.body-xs    { font-size: var(--font-size-body-xs);    line-height: var(--line-height-body-xs);    letter-spacing: var(--letter-spacing-body-xs); }
.body-small { font-size: var(--font-size-body-small); line-height: var(--line-height-body-small); letter-spacing: var(--letter-spacing-body-small); }
.body-base  { font-size: var(--font-size-body-base);  line-height: var(--line-height-body-base);  letter-spacing: var(--letter-spacing-body-base); }
.body-large { font-size: var(--font-size-body-large); line-height: var(--line-height-body-large); letter-spacing: var(--letter-spacing-body-large); }
.body-xl    { font-size: var(--font-size-body-xl);    line-height: var(--line-height-body-xl);    letter-spacing: var(--letter-spacing-body-xl); }
.body-2xl   { font-size: var(--font-size-body-2xl);   line-height: var(--line-height-body-2xl);   letter-spacing: var(--letter-spacing-body-2xl); }
.body-3xl   { font-size: var(--font-size-body-3xl);   line-height: var(--line-height-body-3xl);   letter-spacing: var(--letter-spacing-body-3xl); }

/* CONTAINER */
.container {
  width: 100%;
  max-width: var(--container-max-width);
  margin-inline: auto;
  padding-inline: var(--container-padding);
}

/* Small reusable helpers */
.truncate-1 {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}