:root {
  --color-primary-50: #e6ecf7;
  --color-primary-100: #c1d0ee;
  --color-primary-200: #9ab3e5;
  --color-primary-300: #7496db;
  --color-primary-400: #4d7acf;
  --color-primary-500: #2953a1;
  --color-primary-600: #204384;
  --color-primary-700: #182f66;
  --color-primary-800: #101d49;
  --color-primary-900: #08102f;

  --color-secondary-50: #fdf4e4;
  --color-secondary-100: #fae3be;
  --color-secondary-200: #f6d198;
  --color-secondary-300: #f1bf71;
  --color-secondary-400: #ecaf4a;
  --color-secondary-500: #d59e28;
  --color-secondary-600: #ac7d20;
  --color-secondary-700: #835e18;
  --color-secondary-800: #5a3f10;
  --color-secondary-900: #311f08;

  --color-tertiary-50: #f2f2f5;
  --color-tertiary-100: #e4e6eb;
  --color-tertiary-200: #c9ccd7;
  --color-tertiary-300: #afb3c2;
  --color-tertiary-400: #9499ae;
  --color-tertiary-500: #79809a;
  --color-tertiary-600: #79809a;
  --color-tertiary-700: #494d5c;
  --color-tertiary-800: #30333e;
  --color-tertiary-900: #181a1f;

  --color-siperak-primary-50: #ecf5fe;
  --color-siperak-primary-100: #e2f0fd;
  --color-siperak-primary-200: #c3e0fc;
  --color-siperak-primary-300: #3f9cf4;
  --color-siperak-primary-400: #398cdc;
  --color-siperak-primary-500: #327dc3;
  --color-siperak-primary-600: #2f75b7;
  --color-siperak-primary-700: #265e92;
  --color-siperak-primary-800: #1c466e;
  --color-siperak-primary-900: #163755;

  --color-siperak-secondary-50: #edfbfc;
  --color-siperak-secondary-100: #e4f8fa;
  --color-siperak-secondary-200: #c7f1f5;
  --color-siperak-secondary-300: #49d3e0;
  --color-siperak-secondary-400: #42beca;
  --color-siperak-secondary-500: #3aa9b3;
  --color-siperak-secondary-600: #379ea8;
  --color-siperak-secondary-700: #2c7f86;
  --color-siperak-secondary-800: #215f65;
  --color-siperak-secondary-900: #1a4a4e;

  --color-base-black: #000000;
  --color-base-white: #ffffff;

  --tbl-border: #e8e9f1;

  --border-radius: 10px;
  --elevation: 0 8px 32px rgba(54, 53, 53, 0.2);
  --elevation--hover: 0 4px 40px rgba(0, 0, 0, 0.3);

  --font-sans-serif: Inter, -apple-system, BlinkMacSystemFont, San Francisco,
    Segoe UI, Roboto, Helvetica Neue, sans-serif;
  --body-font-size: 0.875rem;
  --body-font-weight: 400;
  --body-line-height: 1.4285714286;

  --font-size-h1: clamp(2.5rem, 5vw, 3.75rem);
  --line-height-h1: clamp(3.25rem, 6vw, 4.5rem);
  --font-size-h2: clamp(2.125rem, 4.5vw, 3rem);
  --line-height-h2: clamp(2.75rem, 5vw, 3.5rem);
  --font-size-h3: clamp(1.75rem, 3.5vw, 2.25rem);
  --line-height-h3: clamp(2.25rem, 4vw, 2.75rem);
  --font-size-h4: clamp(1.375rem, 3vw, 1.875rem);
  --line-height-h4: clamp(2rem, 4vw, 2.5rem);
  --font-size-h5: clamp(1.25rem, 2.5vw, 1.5rem);
  --line-height-h5: clamp(1.875rem, 3vw, 2.25rem);
  --font-size-h6: clamp(1rem, 2vw, 1.25rem);
  --line-height-h6: clamp(1.5rem, 2.5vw, 1.75rem);

  --font-size-body-large: clamp(1rem, 2.5vw, 1.125rem);
  --line-height-body-large: clamp(1.5rem, 3vw, 1.75rem);
  --font-size-body-regular: clamp(0.8125rem, 2vw, 0.875rem);
  --line-height-body-regular: clamp(1.25rem, 2.5vw, 1.3125rem);
  --font-size-caption-large: clamp(0.8125rem, 2vw, 0.875rem);
  --line-height-caption-large: clamp(1.25rem, 2.5vw, 1.3125rem);
  --font-size-caption-small: clamp(0.6875rem, 1.5vw, 0.75rem);
  --line-height-caption-small: clamp(1rem, 2vw, 1.125rem);
  --font-size-smallest: clamp(0.5625rem, 1.2vw, 0.625rem);
  --line-height-smallest: clamp(0.875rem, 2vw, 1rem);
}