:root {
  --h360-font-family-sans: "Public Sans", "Segoe UI", sans-serif;
  --h360-font-size-xxs: 0.6875rem;
  --h360-font-size-xs: 0.75rem;
  --h360-font-size-sm: 0.875rem;
  --h360-font-size-md: 1rem;
  --h360-font-size-lg: 1.125rem;
  --h360-font-size-xl: 1.25rem;
  --h360-font-size-2xl: 1.5rem;
  --h360-font-weight-regular: 400;
  --h360-font-weight-medium: 500;
  --h360-font-weight-semibold: 600;
  --h360-font-weight-bold: 700;
  --h360-line-height-tight: 1.2;
  --h360-line-height-normal: 1.5;

  --h360-space-0: 0;
  --h360-space-1: 0.25rem;
  --h360-space-2: 0.5rem;
  --h360-space-3: 0.75rem;
  --h360-space-4: 1rem;
  --h360-space-5: 1.25rem;
  --h360-space-6: 1.5rem;
  --h360-space-7: 1.75rem;
  --h360-space-8: 2rem;
  --h360-space-10: 2.5rem;

  --h360-radius-sm: 0.375rem;
  --h360-radius-md: 0.5rem;
  --h360-radius-lg: 0.75rem;
  --h360-radius-xl: 1rem;
  --h360-radius-pill: 999px;

  --h360-shadow-sm: 0 0.125rem 0.5rem rgba(60, 60, 59, 0.08);
  --h360-shadow-md: 0 0.25rem 1rem rgba(60, 60, 59, 0.12);
  --h360-shadow-lg: 0 0.5rem 1.5rem rgba(60, 60, 59, 0.14);

  --h360-duration-fast: 160ms;
  --h360-duration-normal: 240ms;
  --h360-ease-standard: ease;
}

html.light-style {
  color-scheme: light;

  --h360-color-brand-50: #edf4f7;
  --h360-color-brand-100: #d9e7ec;
  --h360-color-brand-300: #8ab6c4;
  --h360-color-brand-500: #56849e;
  --h360-color-brand-600: #3f667d;
  --h360-color-accent-500: #00bad1;
  --h360-color-neutral-900: #3c3c3b;
  --h360-color-neutral-600: #5e5e5d;
  --h360-color-neutral-500: #9d9d9c;
  --h360-color-neutral-200: #d6dcdf;
  --h360-color-neutral-50: #f4f6f7;

  --h360-surface-page: #f4f6f7;
  --h360-surface-card: #ffffff;
  --h360-surface-soft: #edf4f7;
  --h360-surface-overlay: rgba(255, 255, 255, 0.82);

  --h360-text-primary: #3c3c3b;
  --h360-text-secondary: #5e5e5d;
  --h360-text-muted: #9d9d9c;

  --h360-border-subtle: #d6dcdf;
  --h360-border-strong: #b9c4ca;

  --h360-state-success-base: #28c76f;
  --h360-state-success-soft: #e7f8ef;
  --h360-state-info-base: #00bad1;
  --h360-state-info-soft: #e5f7fa;
  --h360-state-warning-base: #ff9f43;
  --h360-state-warning-soft: #fff3e7;
  --h360-state-danger-base: #ff4c51;
  --h360-state-danger-soft: #ffecee;

  --h360-focus-ring: rgba(0, 186, 209, 0.34);
}

html.dark-style {
  color-scheme: dark;

  --h360-color-brand-50: #1e2f39;
  --h360-color-brand-100: #25414f;
  --h360-color-brand-300: #3f667d;
  --h360-color-brand-500: #56849e;
  --h360-color-brand-600: #8ab6c4;
  --h360-color-accent-500: #00bad1;
  --h360-color-neutral-900: #f4f6f7;
  --h360-color-neutral-600: #c6d0d4;
  --h360-color-neutral-500: #9d9d9c;
  --h360-color-neutral-200: #5e5e5d;
  --h360-color-neutral-50: #3c3c3b;

  --h360-surface-page: #3c3c3b;
  --h360-surface-card: #444443;
  --h360-surface-soft: #4d4d4c;
  --h360-surface-overlay: rgba(68, 68, 67, 0.76);

  --h360-text-primary: #f4f6f7;
  --h360-text-secondary: #d6dcdf;
  --h360-text-muted: #9d9d9c;

  --h360-border-subtle: #5e5e5d;
  --h360-border-strong: #838382;

  --h360-state-success-base: #28c76f;
  --h360-state-success-soft: rgba(40, 199, 111, 0.2);
  --h360-state-info-base: #00bad1;
  --h360-state-info-soft: rgba(0, 186, 209, 0.2);
  --h360-state-warning-base: #ff9f43;
  --h360-state-warning-soft: rgba(255, 159, 67, 0.2);
  --h360-state-danger-base: #ff4c51;
  --h360-state-danger-soft: rgba(255, 76, 81, 0.2);

  --h360-focus-ring: rgba(138, 182, 196, 0.34);
}