:root {
  /* 1. Color primitives */
  --ref-color-neutral-0: #000000;
  --ref-color-neutral-20: #333333;
  --ref-color-neutral-40: #666666;
  --ref-color-neutral-60: #999999;
  --ref-color-neutral-80: #cccccc;
  --ref-color-neutral-90: #e6e6e6;
  --ref-color-neutral-95: #f2f2f2;
  --ref-color-neutral-98: #fafafa;
  --ref-color-neutral-100: #ffffff;
  --ref-color-blue-40: #0b57d0;
  --ref-color-blue-50: #1a73e8;
  --ref-color-blue-60: #4c8df6;
  --ref-color-red-40: #b00020;
  --ref-color-red-50: #d32f2f;
  --ref-color-red-60: #ef5350;
  --ref-color-green-40: #137333;
  --ref-color-green-50: #1e8e3e;
  --ref-color-orange-50: #b84e14;
  --ref-color-yellow-40: #b26a00;
  --ref-color-yellow-50: #f9ab00;

  /* 2. Space */
  --ref-space-4: 4px;
  --ref-space-8: 8px;
  --ref-space-12: 12px;
  --ref-space-16: 16px;
  --ref-space-24: 24px;
  --ref-space-32: 32px;
  --ref-space-48: 48px;

  /* 3. Radius */
  --ref-radius-8: 8px;
  --ref-radius-12: 12px;
  --ref-radius-16: 16px;
  --ref-radius-pill: 999px;

  /* 4. Typography */
  --ref-font-family-base: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "Segoe UI Emoji", "Apple Color Emoji", "Noto Color Emoji", sans-serif;
  --ref-font-heading-screen-size: 24px;
  --ref-font-heading-screen-line-height: 32px;
  --ref-font-heading-screen-weight: 600;
  --ref-font-body-size: 18px;
  --ref-font-body-line-height: 28px;
  --ref-font-body-weight: 400;
  --ref-font-helper-size: 16px;
  --ref-font-helper-line-height: 24px;
  --ref-font-helper-weight: 400;
  --ref-font-error-size: 16px;
  --ref-font-error-line-height: 24px;
  --ref-font-error-weight: 500;

  /* 5. Layout constants */
  --ref-layout-min-width: 320px;
  --ref-layout-max-content-width: 560px;
  --ref-layout-max-modal-width: 560px;
  --ref-layout-max-modal-height: 80vh;
  --ref-layout-page-padding-phone: 16px;
  --ref-layout-page-padding-tablet: 24px;
  --ref-layout-page-padding-desktop: 32px;
  --ref-layout-tap-target-min: 44px;

  /* 6. Breakpoints */
  --ref-breakpoint-phone-max: 767px;
  --ref-breakpoint-tablet-min: 768px;
  --ref-breakpoint-tablet-max: 1023px;
  --ref-breakpoint-desktop-min: 1024px;

  /* 7. Motion */
  --ref-motion-duration-fast: 120ms;
  --ref-motion-duration-normal: 200ms;
  --ref-motion-duration-slow: 320ms;
  --ref-motion-typing-delay-min: 2s;
  --ref-motion-typing-delay-max: 4s;

  /* 8. Shadows */
  --ref-shadow-card: 0 1px 2px rgba(0, 0, 0, 0.08);
  --ref-shadow-modal: 0 8px 24px rgba(0, 0, 0, 0.16);
  --ref-shadow-focus: 0 0 0 3px rgba(26, 115, 232, 0.28);

  /* 9. Z-index */
  --ref-z-base: 1;
  --ref-z-sticky: 100;
  --ref-z-overlay: 1000;
  --ref-z-modal: 1100;
  --ref-z-toast: 1200;

  /* 10. App surfaces */
  --app-bg: var(--ref-color-neutral-98);
  --app-surface: var(--ref-color-neutral-100);
  --app-card-bg: var(--ref-color-neutral-100);
  --app-muted-bg: var(--ref-color-neutral-95);
  --app-disabled-bg: var(--ref-color-neutral-90);

  /* 11. Text */
  --text-primary: var(--ref-color-neutral-20);
  --text-secondary: var(--ref-color-neutral-40);
  --text-muted: var(--ref-color-neutral-60);
  --text-on-primary: var(--ref-color-neutral-100);
  --text-disabled: var(--ref-color-neutral-60);
  --text-error: var(--ref-color-red-40);
  --text-success: var(--ref-color-green-40);
  --text-brand-accent: var(--ref-color-orange-50);

  /* 12. Borders */
  --border-default: var(--ref-color-neutral-80);
  --border-strong: var(--ref-color-neutral-60);
  --border-error: var(--ref-color-red-50);
  --border-focus: var(--ref-color-blue-50);

  /* 13. Focus */
  --focus-ring-color: var(--ref-color-blue-50);
  --focus-ring-shadow: var(--ref-shadow-focus);

  /* 14. Actions / buttons */
  --button-primary-bg: var(--ref-color-blue-50);
  --button-primary-bg-hover: var(--ref-color-blue-40);
  --button-primary-bg-pressed: var(--ref-color-blue-60);
  --button-primary-text: var(--ref-color-neutral-100);
  --button-secondary-bg: var(--ref-color-neutral-100);
  --button-secondary-bg-hover: var(--ref-color-neutral-95);
  --button-secondary-bg-pressed: var(--ref-color-neutral-90);
  --button-secondary-text: var(--ref-color-blue-50);
  --button-secondary-border: var(--border-default);
  --button-disabled-bg: var(--app-disabled-bg);
  --button-disabled-text: var(--text-disabled);

  /* 15. Feedback */
  --feedback-error: var(--ref-color-red-50);
  --feedback-warning: var(--ref-color-yellow-50);
  --feedback-success: var(--ref-color-green-50);
  --success-panel-color: #118847;
  --success-panel-background: #eefaf2;


  /* 16. Spacing use cases */
  --space-2xs: var(--ref-space-4);
  --space-xs: var(--ref-space-8);
  --space-sm: var(--ref-space-12);
  --space-md: var(--ref-space-16);
  --space-lg: var(--ref-space-24);
  --space-xl: var(--ref-space-32);
  --space-2xl: var(--ref-space-48);

  /* 17. Radius use cases */
  --radius-input: var(--ref-radius-12);
  --radius-button: var(--ref-radius-12);
  --radius-card: var(--ref-radius-16);
  --radius-modal: var(--ref-radius-16);
  --radius-message: var(--ref-radius-16);
  --radius-chip: var(--ref-radius-pill);

  /* 18. Typography use cases */
  --font-family-base: var(--ref-font-family-base);
  --font-heading-screen-size: var(--ref-font-heading-screen-size);
  --font-heading-screen-line-height: var(--ref-font-heading-screen-line-height);
  --font-heading-screen-weight: var(--ref-font-heading-screen-weight);
  --font-body-size: var(--ref-font-body-size);
  --font-body-line-height: var(--ref-font-body-line-height);
  --font-body-weight: var(--ref-font-body-weight);
  --font-helper-size: var(--ref-font-helper-size);
  --font-helper-line-height: var(--ref-font-helper-line-height);
  --font-helper-weight: var(--ref-font-helper-weight);
  --font-error-size: var(--ref-font-error-size);
  --font-error-line-height: var(--ref-font-error-line-height);
  --font-error-weight: var(--ref-font-error-weight);

  /* 19. Layout use cases */
  --viewport-min-width: var(--ref-layout-min-width);
  --content-max-width: var(--ref-layout-max-content-width);
  --modal-max-width: var(--ref-layout-max-modal-width);
  --modal-max-height: var(--ref-layout-max-modal-height);
  --page-padding-inline-phone: var(--ref-layout-page-padding-phone);
  --page-padding-inline-tablet: var(--ref-layout-page-padding-tablet);
  --page-padding-inline-desktop: var(--ref-layout-page-padding-desktop);
  --tap-target-min: var(--ref-layout-tap-target-min);

  /* 20. Motion use cases */
  --motion-fast: var(--ref-motion-duration-fast);
  --motion-normal: var(--ref-motion-duration-normal);
  --motion-slow: var(--ref-motion-duration-slow);
  --typing-delay-min: var(--ref-motion-typing-delay-min);
  --typing-delay-max: var(--ref-motion-typing-delay-max);

  /* 21. Elevation */
  --shadow-card: var(--ref-shadow-card);
  --shadow-modal: var(--ref-shadow-modal);

  /* 22. Layering */
  --z-base: var(--ref-z-base);
  --z-sticky: var(--ref-z-sticky);
  --z-overlay: var(--ref-z-overlay);
  --z-modal: var(--ref-z-modal);
  --z-toast: var(--ref-z-toast);

  /* 23. Starter component tokens */

  /* top bar */
  --topbar-min-height: 56px;
  --topbar-padding-x: var(--page-padding-inline-phone);
  --topbar-padding-y: var(--space-sm);
  --topbar-gap: var(--space-sm);
  --topbar-bg: var(--app-card-bg);
  --topbar-border-color: var(--border-default);
  --topbar-border-width: 1px;
  --topbar-shadow: none;
  --topbar-z-index: var(--z-sticky);

  /* buttons */
  --button-min-height: 44px;
  --button-padding-x: var(--space-md);
  --button-padding-y: var(--space-sm);
  --button-gap: var(--space-xs);
  --button-border-width: 1px;
  --button-radius: var(--radius-button);
  --button-font-size: var(--font-helper-size);
  --button-line-height: var(--font-helper-line-height);
  --button-font-weight: var(--font-helper-weight);
  --button-primary-background: var(--button-primary-bg);
  --button-primary-background-hover: var(--button-primary-bg-hover);
  --button-primary-background-pressed: var(--button-primary-bg-pressed);
  --button-primary-text-color: var(--button-primary-text);
  --button-primary-border: transparent;
  --button-secondary-background: var(--button-secondary-bg);
  --button-secondary-background-hover: var(--button-secondary-bg-hover);
  --button-secondary-background-pressed: var(--button-secondary-bg-pressed);
  --button-secondary-text-color: var(--button-secondary-text);
  --button-secondary-border-color: var(--button-secondary-border);
  --button-disabled-background: var(--button-disabled-bg);
  --button-disabled-text-color: var(--button-disabled-text);
  --button-disabled-border-color: var(--border-default);

  /* inputs */
  --input-min-height: 44px;
  --input-padding-x: var(--space-md);
  --input-padding-y: var(--space-sm);
  --input-gap: var(--space-xs);
  --input-border-width: 1px;
  --input-radius: var(--radius-input);
  --input-background: var(--app-card-bg);
  --input-text: var(--text-primary);
  --input-placeholder: var(--text-muted);
  --input-border: var(--border-default);
  --input-border-hover: var(--border-strong);
  --input-border-focus: var(--border-focus);
  --input-border-error: var(--border-error);

  /* modal */
  --modal-width: min(100%, var(--modal-max-width));
  --modal-padding: var(--space-lg);
  --modal-gap: var(--space-md);
  --modal-radius: var(--radius-modal);
  --modal-background: var(--app-card-bg);
  --modal-border: var(--border-default);
  --modal-border-width: 1px;
  --modal-shadow: var(--shadow-modal);
  --modal-z-index: var(--z-modal);

  /* chat bubbles */
  --bubble-max-width: 85%;
  --bubble-padding-x: var(--space-md);
  --bubble-padding-y: var(--space-sm);
  --bubble-gap: var(--space-xs);
  --bubble-stack-gap: var(--space-xs);
  --bubble-radius: var(--radius-message);
  --bubble-font-size: var(--font-body-size);
  --bubble-line-height: var(--font-body-line-height);
  --bubble-incoming-background: var(--app-card-bg);
  --bubble-incoming-text: var(--text-primary);
  --bubble-incoming-border: var(--border-default);
  --bubble-outgoing-background: var(--app-muted-bg);
  --bubble-outgoing-text: var(--text-primary);
  --bubble-outgoing-border: var(--border-default);

  /* help chip / pill */
  --chip-min-height: 44px;
  --chip-padding-x: var(--space-md);
  --chip-padding-y: var(--space-xs);
  --chip-gap: var(--space-xs);
  --chip-radius: var(--radius-chip);
  --chip-background: var(--button-secondary-bg);
  --chip-text: var(--text-primary);
  --chip-border: var(--border-default);
  --chip-border-width: 1px;

  /* done panel / card */
  --panel-padding: var(--space-lg);
  --panel-gap: var(--space-md);
  --panel-radius: var(--radius-card);
  --panel-background: var(--app-card-bg);
  --panel-border: var(--border-default);
  --panel-border-width: 1px;
  --panel-shadow: var(--shadow-card);

  /* control focus */
  --control-focus-ring-width: 3px;
  --control-focus-ring-color: var(--focus-ring-color);
  --control-focus-ring-shadow: var(--focus-ring-shadow);
  --control-focus-outline-offset: 2px;
}