:root {
  /* Color Palette (RGB for utility) */
  --primary: 0, 18, 111;
  --secondary: 176, 185, 200;
  --background: 245, 247, 250;
  --accent-hex: #fbff00;

  /* Semantic Colors */
  --color-primary: rgb(var(--primary));
  --color-secondary: rgb(var(--secondary));
  --color-accent: var(--accent-hex);
  --color-bg: rgb(var(--background));
  --color-text-dark: #1a202c;
  --color-text-light: #3e4a60;
  --container-color: #ffffff;

  /* Typography */
  --font-inter: "Inter", sans-serif;
  --font-lato: "Lato", sans-serif;
  --font-bai: "Bai Jamjuree", sans-serif;
  --biggest-font-size: 2.5rem;
  --h1-font-size: 1.75rem;
  --h2-font-size: 1.25rem;
  --h3-font-size: 1.125rem;
  --normal-font-size: 0.938rem;
  --small-font-size: 0.813rem;
  --smaller-font-size: 0.75rem;
  --font-regular: 400;
  --font-medium: 500;
  --font-semi-bold: 600;
  --font-bold: 700;

  /* Layout & Spacing */
  --header-height: 3.5rem;
  --sticky-top-position: 100px;

  /* Effects & Transitions */
  --shadow-light: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.06);
  --transition-speed: 0.35s ease-in-out;

  /* Animation Settings */
  --animation-duration: 30s;
  --items-to-show1: 4;
  --items-to-show2: 4;
  --image-height: 250px;
  --item-padding: 20px;
  --item-width: calc(100% / var(--items-to-show2));

  /* Z-index Layers */
  --z-tooltip: 10;
  --z-fixed: 100;
}