:root {
  /* basics - from Figma tw/colors */
  --hl-white: #FFFFFF;
  --hl-white-5: rgba(255, 255, 255, 0.05);
  --hl-black: #000000;

  /* homelight-blue (primary) - complete scale from Figma tw/colors */
  --hl-blue-50: #F4FBFF;
  --hl-blue-100: #E8F5FF;
  --hl-blue-200: #DBF0FF;
  --hl-blue-300: #D0ECFF;
  --hl-blue-400: #8BD1FF;
  --hl-blue-500: #46B6FF;
  --hl-blue-600: #1192E5;
  --hl-blue-700: #0C6EBA;
  --hl-blue-800: #273653;
  --hl-blue-900: #0E2433;
  --hl-blue-950: #071219;

  /* slate (neutral) - complete scale from Figma tw/colors */
  --hl-slate-50: #F8FAFC;
  --hl-slate-100: #F1F5F9;
  --hl-slate-200: #E2E8F0;
  --hl-slate-300: #CBD5E1;
  --hl-slate-400: #94A3B8;
  --hl-slate-500: #64748B;
  --hl-slate-600: #475569;
  --hl-slate-700: #334155;
  --hl-slate-800: #1E293B;
  --hl-slate-900: #0F172A;
  --hl-slate-950: #020617;

  /* Legacy gray mappings (for backward compatibility) */
  --hl-gray-50: var(--hl-slate-50);
  --hl-gray-100: var(--hl-slate-100);
  --hl-gray-200: var(--hl-slate-200);
  --hl-gray-300: var(--hl-slate-300);
  --hl-gray-400: var(--hl-slate-400);
  --hl-gray-500: var(--hl-slate-500);
  --hl-gray-600: var(--hl-slate-600);
  --hl-gray-700: var(--hl-slate-700);
  --hl-gray-900: var(--hl-slate-900);
  
  /* Figma design system colors */
  --figma-blue-80: #273653;
  --figma-gray-300: #DBDFE6;
  --figma-gray-500: #8E929C;

  /* 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) - complete scale from Figma tw/colors */
  --hl-orange-50: #FFF7ED;
  --hl-orange-100: #FFEDD5;
  --hl-orange-200: #FED7AA;
  --hl-orange-300: #FDBA74;
  --hl-orange-400: #FB923C;
  --hl-orange-500: #F97316;
  --hl-orange-600: #EA580C;
  --hl-orange-700: #C2410C;
  --hl-orange-800: #9A3412;
  --hl-orange-900: #7C2D12;
  --hl-orange-950: #431407;

  /* 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;

  /* Figma Variables - Colors */
  --figma-foreground: #273653;
  --figma-muted-foreground: #64748b;
  --figma-secondary: #f1f5f9;
  --figma-background: #ffffff;
  --figma-primary: #46b6ff;
  --figma-primary-foreground: #f8fafc;
  --figma-slate-500: #64748b;

  /* Figma Variables - Spacing */
  --figma-gap-1: 4px;
  --figma-gap-1-5: 6px;
  --figma-gap-2: 8px;
  --figma-gap-4: 16px;
  --figma-px-3: 12px;
  --figma-pt-0-5: 2px;

  /* Figma Variables - Border Radius */
  --figma-rounded-sm: 4px;
  --figma-rounded-md: 6px;

  /* Figma Variables - Border Width */
  --figma-border: 1px;
  --figma-stroke-1: 1px;
  --figma-stroke-2: 2px;

  /* Figma Variables - Opacity */
  --figma-opacity-50: 0.5;

  /* Figma Variables - Shadow */
  --figma-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.1);

  /* 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);

  /* Figma semantic aliases (mapped to existing) */
  --color-figma-foreground: var(--figma-foreground);
  --color-figma-muted-foreground: var(--figma-muted-foreground);
  --color-figma-secondary: var(--figma-secondary);
  --color-figma-background: var(--figma-background);
  --color-figma-primary: var(--figma-primary);
  --color-figma-primary-foreground: var(--figma-primary-foreground);

  /* typography - from Figma tw/font */
  /* Font families */
  --font-sans: "Open Sans", "Centra No2", sans-serif;
  --font-mono: "Geist Mono", "Open Sans", "Centra No2", monospace;

  /* Font sizes - from Figma tw/font size */
  --font-size-xs: 12px;
  --font-size-sm: 14px;
  --font-size-base: 16px;
  --font-size-lg: 18px;
  --font-size-xl: 20px;
  --font-size-2xl: 24px;
  --font-size-3xl: 30px;
  --font-size-4xl: 36px;

  /* Legacy font size mappings (for backward compatibility) */
  --fs-3xl: 1.875rem;  /* 30px */
  --fs-2xl: 1.5rem;    /* 24px */
  --fs-xl:  1.25rem;   /* 20px */
  --fs-lg:  1.125rem;  /* 18px */
  --fs-md:  1rem;      /* 16px */
  --fs-sm:  0.875rem;  /* 14px */
  --fs-xs:  0.75rem;   /* 12px */
  --fs-2xs: 0.75rem;   /* 12px */

  --text-lg: 1.125rem; /* 18px */
  --text-md: 1rem;     /* 16px */
  --text-sm: 0.875rem; /* 14px */
  --overline: 0.75rem; /* 12px */

  /* Font styles - from Figma tw/font style */
  --font-style-italic: italic;
  --font-style-normal: normal;

  /* Font weights - from Figma tw/font weight */
  --fw-thin: 100;
  --fw-extralight: 200;
  --fw-light: 300;
  --fw-normal: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-extrabold: 800;
  --fw-black: 900;

  /* Legacy font weight mappings (for backward compatibility) */
  --fw-regular: 400;

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

  --ls-overline: 0.08em;

  /* Figma Variables - Typography */
  /* Text-4xl/Semi Bold: size 36px, weight 600, lineHeight 40px */
  --figma-text-4xl-semibold-size: 36px;
  --figma-text-4xl-semibold-weight: 600;
  --figma-text-4xl-semibold-line-height: 40px;
  --figma-text-4xl-semibold-letter-spacing: 0;

  /* Text-base/Regular: size 16px, weight 400, lineHeight 24px */
  --figma-text-base-regular-size: 16px;
  --figma-text-base-regular-weight: 400;
  --figma-text-base-regular-line-height: 24px;
  --figma-text-base-regular-letter-spacing: 0;

  /* Text-sm/Medium: size 14px, weight 600, lineHeight 20px */
  --figma-text-sm-medium-size: 14px;
  --figma-text-sm-medium-weight: 600;
  --figma-text-sm-medium-line-height: 20px;
  --figma-text-sm-medium-letter-spacing: 0;

  /* Text-sm/Regular: size 14px, weight 400, lineHeight 20px */
  --figma-text-sm-regular-size: 14px;
  --figma-text-sm-regular-weight: 400;
  --figma-text-sm-regular-line-height: 20px;
  --figma-text-sm-regular-letter-spacing: 0;

  /* Text-xs/Medium: size 12px, weight 600, lineHeight 16px */
  --figma-text-xs-medium-size: 12px;
  --figma-text-xs-medium-weight: 600;
  --figma-text-xs-medium-line-height: 16px;
  --figma-text-xs-medium-letter-spacing: 0;

  /* Text-xs/Regular: size 12px, weight 400, lineHeight 16px */
  --figma-text-xs-regular-size: 12px;
  --figma-text-xs-regular-weight: 400;
  --figma-text-xs-regular-line-height: 16px;
  --figma-text-xs-regular-letter-spacing: 0;

  /* 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);

  /* Figma Variables - Additional mappings */
  /* Map Figma primary to existing brand color */
  --figma-primary-mapped: var(--hl-blue-500); /* #46b6ff matches Figma primary */
  --figma-foreground-mapped: var(--hl-blue-800); /* #273653 matches Figma foreground */
}

/* Figma Typography Utility Classes */
.text-figma-base-regular {
  font-family: var(--font-sans);
  font-size: var(--figma-text-base-regular-size);
  font-weight: var(--figma-text-base-regular-weight);
  line-height: var(--figma-text-base-regular-line-height);
  letter-spacing: var(--figma-text-base-regular-letter-spacing);
}

/* Color utility classes for CDN Tailwind compatibility */
/* These classes allow using brand colors with CDN Tailwind */

/* Text colors */
.text-hl-blue-50 { color: var(--hl-blue-50); }
.text-hl-blue-100 { color: var(--hl-blue-100); }
.text-hl-blue-200 { color: var(--hl-blue-200); }
.text-hl-blue-300 { color: var(--hl-blue-300); }
.text-hl-blue-400 { color: var(--hl-blue-400); }
.text-hl-blue-500 { color: var(--hl-blue-500); }
.text-hl-blue-600 { color: var(--hl-blue-600); }
.text-hl-blue-700 { color: var(--hl-blue-700); }
.text-hl-blue-800 { color: var(--hl-blue-800); }
.text-hl-blue-900 { color: var(--hl-blue-900); }
.text-hl-blue-950 { color: var(--hl-blue-950); }

.text-hl-slate-50 { color: var(--hl-slate-50); }
.text-hl-slate-100 { color: var(--hl-slate-100); }
.text-hl-slate-200 { color: var(--hl-slate-200); }
.text-hl-slate-300 { color: var(--hl-slate-300); }
.text-hl-slate-400 { color: var(--hl-slate-400); }
.text-hl-slate-500 { color: var(--hl-slate-500); }
.text-hl-slate-600 { color: var(--hl-slate-600); }
.text-hl-slate-700 { color: var(--hl-slate-700); }
.text-hl-slate-800 { color: var(--hl-slate-800); }
.text-hl-slate-900 { color: var(--hl-slate-900); }
.text-hl-slate-950 { color: var(--hl-slate-950); }

.text-hl-orange-50 { color: var(--hl-orange-50); }
.text-hl-orange-100 { color: var(--hl-orange-100); }
.text-hl-orange-200 { color: var(--hl-orange-200); }
.text-hl-orange-300 { color: var(--hl-orange-300); }
.text-hl-orange-400 { color: var(--hl-orange-400); }
.text-hl-orange-500 { color: var(--hl-orange-500); }
.text-hl-orange-600 { color: var(--hl-orange-600); }
.text-hl-orange-700 { color: var(--hl-orange-700); }
.text-hl-orange-800 { color: var(--hl-orange-800); }
.text-hl-orange-900 { color: var(--hl-orange-900); }
.text-hl-orange-950 { color: var(--hl-orange-950); }

.text-hl-red-50 { color: var(--hl-red-50); }
.text-hl-red-100 { color: var(--hl-red-100); }
.text-hl-red-200 { color: var(--hl-red-200); }
.text-hl-red-300 { color: var(--hl-red-300); }
.text-hl-red-500 { color: var(--hl-red-500); }
.text-hl-red-600 { color: var(--hl-red-600); }
.text-hl-red-700 { color: var(--hl-red-700); }
.text-hl-red-900 { color: var(--hl-red-900); }

/* Ensure hidden form controls are never visually rendered */
input[type="hidden"] {
  display: none !important;
}

/* Background colors */
.bg-hl-blue-50 { background-color: var(--hl-blue-50); }
.bg-hl-blue-100 { background-color: var(--hl-blue-100); }
.bg-hl-blue-200 { background-color: var(--hl-blue-200); }
.bg-hl-blue-300 { background-color: var(--hl-blue-300); }
.bg-hl-blue-400 { background-color: var(--hl-blue-400); }
.bg-hl-blue-500 { background-color: var(--hl-blue-500); }
.bg-hl-blue-600 { background-color: var(--hl-blue-600); }
.bg-hl-blue-700 { background-color: var(--hl-blue-700); }
.bg-hl-blue-800 { background-color: var(--hl-blue-800); }
.bg-hl-blue-900 { background-color: var(--hl-blue-900); }
.bg-hl-blue-950 { background-color: var(--hl-blue-950); }

.bg-hl-slate-50 { background-color: var(--hl-slate-50); }
.bg-hl-slate-100 { background-color: var(--hl-slate-100); }
.bg-hl-slate-200 { background-color: var(--hl-slate-200); }
.bg-hl-slate-300 { background-color: var(--hl-slate-300); }
.bg-hl-slate-400 { background-color: var(--hl-slate-400); }
.bg-hl-slate-500 { background-color: var(--hl-slate-500); }
.bg-hl-slate-600 { background-color: var(--hl-slate-600); }
.bg-hl-slate-700 { background-color: var(--hl-slate-700); }
.bg-hl-slate-800 { background-color: var(--hl-slate-800); }
.bg-hl-slate-900 { background-color: var(--hl-slate-900); }
.bg-hl-slate-950 { background-color: var(--hl-slate-950); }

.bg-hl-orange-50 { background-color: var(--hl-orange-50); }
.bg-hl-orange-100 { background-color: var(--hl-orange-100); }
.bg-hl-orange-200 { background-color: var(--hl-orange-200); }
.bg-hl-orange-300 { background-color: var(--hl-orange-300); }
.bg-hl-orange-400 { background-color: var(--hl-orange-400); }
.bg-hl-orange-500 { background-color: var(--hl-orange-500); }
.bg-hl-orange-600 { background-color: var(--hl-orange-600); }
.bg-hl-orange-700 { background-color: var(--hl-orange-700); }
.bg-hl-orange-800 { background-color: var(--hl-orange-800); }
.bg-hl-orange-900 { background-color: var(--hl-orange-900); }
.bg-hl-orange-950 { background-color: var(--hl-orange-950); }

.bg-hl-red-50 { background-color: var(--hl-red-50); }
.bg-hl-red-100 { background-color: var(--hl-red-100); }
.bg-hl-red-200 { background-color: var(--hl-red-200); }
.bg-hl-red-300 { background-color: var(--hl-red-300); }
.bg-hl-red-500 { background-color: var(--hl-red-500); }
.bg-hl-red-600 { background-color: var(--hl-red-600); }
.bg-hl-red-700 { background-color: var(--hl-red-700); }
.bg-hl-red-900 { background-color: var(--hl-red-900); }

/* Border colors */
.border-hl-blue-50 { border-color: var(--hl-blue-50); }
.border-hl-blue-100 { border-color: var(--hl-blue-100); }
.border-hl-blue-200 { border-color: var(--hl-blue-200); }
.border-hl-blue-300 { border-color: var(--hl-blue-300); }
.border-hl-blue-400 { border-color: var(--hl-blue-400); }
.border-hl-blue-500 { border-color: var(--hl-blue-500); }
.border-hl-blue-600 { border-color: var(--hl-blue-600); }
.border-hl-blue-700 { border-color: var(--hl-blue-700); }
.border-hl-blue-800 { border-color: var(--hl-blue-800); }
.border-hl-blue-900 { border-color: var(--hl-blue-900); }
.border-hl-blue-950 { border-color: var(--hl-blue-950); }

.border-hl-slate-50 { border-color: var(--hl-slate-50); }
.border-hl-slate-100 { border-color: var(--hl-slate-100); }
.border-hl-slate-200 { border-color: var(--hl-slate-200); }
.border-hl-slate-300 { border-color: var(--hl-slate-300); }
.border-hl-slate-400 { border-color: var(--hl-slate-400); }
.border-hl-slate-500 { border-color: var(--hl-slate-500); }
.border-hl-slate-600 { border-color: var(--hl-slate-600); }
.border-hl-slate-700 { border-color: var(--hl-slate-700); }
.border-hl-slate-800 { border-color: var(--hl-slate-800); }
.border-hl-slate-900 { border-color: var(--hl-slate-900); }
.border-hl-slate-950 { border-color: var(--hl-slate-950); }

.border-hl-orange-50 { border-color: var(--hl-orange-50); }
.border-hl-orange-100 { border-color: var(--hl-orange-100); }
.border-hl-orange-200 { border-color: var(--hl-orange-200); }
.border-hl-orange-300 { border-color: var(--hl-orange-300); }
.border-hl-orange-400 { border-color: var(--hl-orange-400); }
.border-hl-orange-500 { border-color: var(--hl-orange-500); }
.border-hl-orange-600 { border-color: var(--hl-orange-600); }
.border-hl-orange-700 { border-color: var(--hl-orange-700); }
.border-hl-orange-800 { border-color: var(--hl-orange-800); }
.border-hl-orange-900 { border-color: var(--hl-orange-900); }
.border-hl-orange-950 { border-color: var(--hl-orange-950); }

.border-hl-red-50 { border-color: var(--hl-red-50); }
.border-hl-red-100 { border-color: var(--hl-red-100); }
.border-hl-red-200 { border-color: var(--hl-red-200); }
.border-hl-red-300 { border-color: var(--hl-red-300); }
.border-hl-red-500 { border-color: var(--hl-red-500); }
.border-hl-red-600 { border-color: var(--hl-red-600); }
.border-hl-red-700 { border-color: var(--hl-red-700); }
.border-hl-red-900 { border-color: var(--hl-red-900); }

/* 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);
}

/* Checkbox styling to match Figma design */
.checkbox-styled {
  appearance: none;
  -webkit-appearance: none;
  border: 2px solid var(--hl-slate-300);
  border-radius: 4px;
  background-color: white;
  cursor: pointer;
  transition: all 0.2s;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  position: relative;
}

/* Default size (w-4 h-4 = 16px) */
.checkbox-styled.w-4,
.checkbox-styled.h-4 {
  width: 16px;
  height: 16px;
}

.checkbox-styled.w-4:checked,
.checkbox-styled.h-4:checked {
  background-image: url("data:image/svg+xml,%3Csvg width='32' height='32' viewBox='0 0 32 32' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M14.3807 23.4129L24.7678 13.0258C25.1205 12.6731 25.1205 12.1012 24.7678 11.7484L23.4904 10.4711C23.1377 10.1184 22.5658 10.1184 22.213 10.4711L13.742 18.9421L9.78702 14.9872C9.43431 14.6345 8.8624 14.6345 8.50964 14.9872L7.23231 16.2645C6.8796 16.6172 6.8796 17.1891 7.23231 17.5419L13.1033 23.4128C13.456 23.7656 14.0279 23.7656 14.3807 23.4129Z' fill='white'/%3E%3C/svg%3E") !important;
  background-size: 12px !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
}

/* Large size (w-5 h-5 = 20px) */
.checkbox-styled.w-5,
.checkbox-styled.h-5 {
  width: 20px;
  height: 20px;
}

.checkbox-styled.w-5:checked,
.checkbox-styled.h-5:checked {
  background-image: url("data:image/svg+xml,%3Csvg width='32' height='32' viewBox='0 0 32 32' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M14.3807 23.4129L24.7678 13.0258C25.1205 12.6731 25.1205 12.1012 24.7678 11.7484L23.4904 10.4711C23.1377 10.1184 22.5658 10.1184 22.213 10.4711L13.742 18.9421L9.78702 14.9872C9.43431 14.6345 8.8624 14.6345 8.50964 14.9872L7.23231 16.2645C6.8796 16.6172 6.8796 17.1891 7.23231 17.5419L13.1033 23.4128C13.456 23.7656 14.0279 23.7656 14.3807 23.4129Z' fill='white'/%3E%3C/svg%3E") !important;
  background-size: 16px !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
}

.checkbox-styled:hover:not(:disabled) {
  border-color: var(--hl-blue-500);
}

.checkbox-styled:checked {
  background-color: var(--hl-blue-500) !important;
  border-color: var(--hl-blue-500) !important;
}

.checkbox-styled:checked:hover:not(:disabled) {
  background-color: var(--hl-blue-600) !important;
  border-color: var(--hl-blue-600) !important;
}

.checkbox-styled:focus {
  outline: none;
}

.checkbox-styled:focus-visible {
  outline: 2px solid var(--hl-blue-500);
  outline-offset: 2px;
}

.checkbox-styled:disabled {
  background-color: white;
  border-color: var(--hl-slate-300);
  cursor: not-allowed;
  opacity: 0.6;
}

.checkbox-styled:disabled:checked {
  background-color: var(--hl-slate-300);
  border-color: var(--hl-slate-300);
}