:root {
  /* basics */
  --hl-white: #FFFFFF;
  --hl-black: #000000;

  /* blue (primary) */
  --hl-blue-100: #F2F9FF;
  --hl-blue-200: #E7F3FF;
  --hl-blue-300: #D6E9FF;
  --hl-blue-400: #8BD1FF;
  --hl-blue-500: #46B6FF;
  --hl-blue-600: #1188E3;
  --hl-blue-700: #0C6EBA;
  --hl-blue-800: #273E63;
  --hl-blue-900: #172B43;

  /* gray (neutral) */
  --hl-gray-50:  #F5F7F9;
  --hl-gray-100: #E2E6EA;
  --hl-gray-200: #DBE2E8;
  --hl-gray-300: #C8D3D9;
  --hl-gray-400: #B1BDC6;
  --hl-gray-600: #727D85;
  --hl-gray-700: #595E62;
  --hl-gray-900: #3A4046;

  /* red (error) */
  --hl-red-50:  #FDF6F6;
  --hl-red-100: #FDEBEB;
  --hl-red-200: #FDDDDD;
  --hl-red-300: #F9C5C5;
  --hl-red-5: #F7382D;
  --hl-red-500: #F37C7C;
  --hl-red-600: #F22D2D;
  --hl-red-700: #DA0C0C;
  --hl-red-900: #800C0C;

  /* orange (accent) */
  --hl-orange-50:  #FFF8F0;
  --hl-orange-100: #FEEBD2;
  --hl-orange-200: #FED8A8;
  --hl-orange-300: #FEB974;
  --hl-orange-500: #F7933D;
  --hl-orange-600: #F06400;
  --hl-orange-700: #D14D00;
  --hl-orange-900: #8A3200;

  /* yellow (warning) */
  --hl-yellow-50:  #FFFAEB;
  --hl-yellow-100: #FFF3C5;
  --hl-yellow-200: #FFE896;
  --hl-yellow-300: #FFDD59;
  --hl-yellow-500: #FDBB07;
  --hl-yellow-600: #E7A500;
  --hl-yellow-700: #BB8000;
  --hl-yellow-900: #705200;

  /* green (success) */
  --hl-green-50:  #F0FAF8;
  --hl-green-100: #D2F2E8;
  --hl-green-200: #A8E7D5;
  --hl-green-300: #80D8BD;
  --hl-green-5: #38BF8F;
  --hl-green-500: #38BF8F;
  --hl-green-600: #109D80;
  --hl-green-700: #17785B;
  --hl-green-900: #025D43;

  /* illustration support (from kit) */
  --hl-snow-gray:   #F2F9FF;
  --hl-frost-gray:  #B3DFFF;
  --hl-slate-gray:  #7D96B2;
  --hl-glacier-blue:#48B6FF;
  --hl-medium-blue: #0C62BA;
  --hl-cobalt-blue: #273E63;

  /* semantic aliases */
  --color-bg: var(--hl-white);
  --color-surface: var(--hl-white);
  --color-border: var(--hl-gray-200);
  --color-text: var(--hl-gray-900);
  --color-text-muted: var(--hl-gray-600);
  --color-brand: var(--hl-blue-600);
  --color-accent: var(--hl-orange-600);
  --color-success: var(--hl-green-600);
  --color-warning: var(--hl-yellow-600);
  --color-error: var(--hl-red-600);
  --color-link: var(--hl-blue-700);
  --color-link-hover: var(--hl-blue-800);
  --color-focus-ring: var(--hl-blue-500);

  /* typography (scale matches “Typography” screenshot labels) */
  --font-sans: "Open Sans", "Centra No2", sans-serif;
  --font-mono: "Open Sans", "Centra No2";

  --fs-3xl: 2.625rem;  /* Heading 3XL */
  --fs-2xl: 2.0rem;    /* Heading 2XL */
  --fs-xl:  1.625rem;  /* Heading XL  */
  --fs-lg:  1.375rem;  /* Heading Lg  */
  --fs-md:  1.125rem;  /* Heading Md  */
  --fs-sm:  1.0rem;    /* Heading Sm  */
  --fs-xs:  0.875rem;  /* Heading XS  */
  --fs-2xs: 0.75rem;   /* Heading 2XS */

  --text-lg: 1.125rem; /* Body lg */
  --text-md: 1rem;     /* Body md */
  --text-sm: 0.875rem; /* Body sm */
  --overline: 0.75rem; /* Overline size */

  --fw-regular: 400;
  --fw-semibold: 600;
  --fw-bold: 700;

  --lh-tight: 1.15;
  --lh-normal: 1.4;
  --lh-relaxed: 1.6;

  --ls-overline: 0.08em;

  /* shadows (blue-tinted from “Shadows” screenshot) */
  --shadow-blue-48dp: 0 24px 48px rgba(17, 136, 227, 0.20);
  --shadow-blue-20dp: 0 10px 20px rgba(17, 136, 227, 0.20);
  --shadow-blue-16dp: 0 8px 16px rgba(17, 136, 227, 0.20);
  --shadow-blue-4dp:  0 2px 4px rgba(17, 136, 227, 0.30);
}

/* optional dark theme hook for later */
.theme-dark {
  --color-bg: #0E1521;
  --color-surface: #121A27;
  --color-border: #223047;
  --color-text: #E6ECF5;
  --color-text-muted: #B5C0CC;
  --color-link: #7DBAFF;
  --color-link-hover: #A8D2FF;
}

/* ambient page backdrop */
.page-bg {
  background:
    radial-gradient(1200px 300px at 50% -100px, rgba(178, 219, 255, 0.45), transparent 60%),
    var(--hl-gray-50);
}