/* Human UI Craft canonical design tokens.
   Use as the design source of truth; ask the user about conflicting project requirements. */

:root {
  color-scheme: light dark;

  /* Typography */
  --hui-font-sans: "Heebo", system-ui, -apple-system, "Segoe UI", sans-serif;
  --hui-font-mono: ui-monospace, "Cascadia Code", "SFMono-Regular", Consolas, monospace;
  --hui-font-weight-regular: 400;
  --hui-font-weight-medium: 500;
  --hui-font-weight-semibold: 600;
  --hui-font-weight-bold: 700;
  --hui-text-caption-size: 0.75rem;
  --hui-text-caption-line: 1.125rem;
  --hui-text-body-small-size: 0.875rem;
  --hui-text-body-small-line: 1.25rem;
  --hui-text-body-size: 1rem;
  --hui-text-body-line: 1.5rem;
  --hui-text-title-size: 1.125rem;
  --hui-text-title-line: 1.625rem;
  --hui-text-heading-small-size: 1.25rem;
  --hui-text-heading-small-line: 1.75rem;
  --hui-text-heading-medium-size: 1.5rem;
  --hui-text-heading-medium-line: 2rem;
  --hui-text-heading-large-size: 2rem;
  --hui-text-heading-large-line: 2.5rem;
  --hui-text-display-size: 2.5rem;
  --hui-text-display-line: 2.75rem;

  /* Spacing: use semantic composition aliases in components. */
  --hui-space-0: 0;
  --hui-space-1: 0.25rem;
  --hui-space-2: 0.5rem;
  --hui-space-3: 0.75rem;
  --hui-space-4: 1rem;
  --hui-space-5: 1.25rem;
  --hui-space-6: 1.5rem;
  --hui-space-8: 2rem;
  --hui-space-10: 2.5rem;
  --hui-space-12: 3rem;
  --hui-space-16: 4rem;

  /* Geometry */
  --hui-radius-small: 0.5rem;
  --hui-radius-medium: 0.75rem;
  --hui-radius-large: 1rem;
  --hui-radius-xlarge: 1.125rem;
  --hui-radius-pill: 999px;
  --hui-border-thin: 1px;
  --hui-control-compact: 2.25rem;
  --hui-control-standard: 2.75rem;
  --hui-control-large: 3rem;
  --hui-hit-target-min: 2.75rem;
  --hui-content-measure: 70ch;
  --hui-workspace-reading-max: 80rem;
  --hui-workspace-data-max: 100rem;
  --hui-nav-wide: 14.75rem;
  --hui-nav-compact: 4.5rem;

  /* Motion */
  --hui-duration-instant: 0ms;
  --hui-duration-fast: 150ms;
  --hui-duration-standard: 200ms;
  --hui-duration-slow: 250ms;
  --hui-duration-spinner-cycle: 800ms;
  --hui-duration-skeleton-cycle: 1600ms;
  --hui-ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --hui-ease-enter: cubic-bezier(0, 0, 0, 1);
  --hui-ease-exit: cubic-bezier(0.3, 0, 1, 1);

  /* Shared stacking contract */
  --hui-z-base: 0;
  --hui-z-raised: 2;
  --hui-z-sticky: 20;
  --hui-z-header: 40;
  --hui-z-navigation: 60;
  --hui-z-popover: 80;
  --hui-z-modal: 100;
  --hui-z-notification: 120;

  /* Theme pairs: light-dark() follows color-scheme without duplicate maps. */
  --hui-color-canvas: light-dark(#f7f5f2, #030303);
  --hui-color-surface: light-dark(#ffffff, #090909);
  --hui-color-surface-subtle: light-dark(#f7f3ee, #101010);
  --hui-color-surface-strong: light-dark(#eee8e1, #171717);
  --hui-color-text: light-dark(#1d1814, #f8f5f0);
  --hui-color-text-secondary: light-dark(#4f4841, #d6d0c9);
  --hui-color-text-tertiary: light-dark(#675f57, #aaa29a);
  --hui-color-border: light-dark(#ddd6cf, #292929);
  --hui-color-border-strong: light-dark(#b8afa6, #4a4744);
  --hui-color-control-border: light-dark(#8a7f74, #706a64);
  --hui-color-primary: #ff792f;
  --hui-color-primary-hover: light-dark(#ef681c, #ff8a4c);
  --hui-color-primary-strong: #ff541f;
  --hui-color-primary-highlight: #ffb06f;
  --hui-color-primary-glow: light-dark(rgb(255 121 47 / 16%), rgb(255 121 47 / 23%));
  --hui-color-on-primary: #2c1100;
  --hui-color-primary-soft: light-dark(#fff0e6, #32180a);
  --hui-color-primary-soft-text: light-dark(#963400, #ffc29f);
  --hui-color-secondary: light-dark(#825000, #f2b84b);
  --hui-color-secondary-hover: light-dark(#684000, #f6c96f);
  --hui-color-secondary-soft: light-dark(#fff3d6, #2b1d08);
  --hui-color-secondary-soft-text: light-dark(#754500, #f7ca72);
  --hui-color-link: light-dark(#a83b00, #ff9a61);
  --hui-color-success: light-dark(#216b45, #6dd69f);
  --hui-color-success-soft: light-dark(#e7f5ec, #10291d);
  --hui-color-warning: light-dark(#795000, #f2c15c);
  --hui-color-warning-soft: light-dark(#fff1d1, #2d210c);
  --hui-color-danger: light-dark(#9d3030, #e3a0a0);
  --hui-color-danger-soft: light-dark(#f9eaea, #2a1717);
  --hui-color-danger-action: light-dark(#8f2f2f, #7c3035);
  --hui-color-on-danger: #ffffff;
  --hui-color-info: light-dark(#6b4b68, #d6a8cf);
  --hui-color-info-soft: light-dark(#f4eaf2, #281b27);
  --hui-color-focus: light-dark(#a83b00, #ff9a61);
  --hui-color-overlay: light-dark(rgb(29 24 20 / 56%), rgb(0 0 0 / 82%));
  --hui-color-chart-grid: light-dark(#e3ddd6, #232323);
  --hui-color-chart-primary: light-dark(#d95000, #ff8a4c);
  --hui-color-chart-secondary: light-dark(#9a6400, #f2b84b);
  --hui-color-chart-positive: light-dark(#24784f, #6dd69f);
  --hui-color-chart-negative: light-dark(#b23a36, #ff8c86);
  --hui-color-skeleton: light-dark(#e9e3dc, #171717);
  --hui-color-skeleton-shine: light-dark(#fbf9f6, #252525);
  --hui-color-scrollbar-track: light-dark(#f2eee8, #101010);
  --hui-color-scrollbar-thumb: light-dark(#867b70, #706a64);
  --hui-color-scrollbar-thumb-hover: light-dark(#6f645a, #8a827a);
  --hui-color-scrollbar-thumb-active: light-dark(#584f47, #aaa29a);
  --hui-shadow-color-small: light-dark(rgb(73 49 27 / 8%), rgb(0 0 0 / 32%));
  --hui-shadow-color-medium: light-dark(rgb(73 49 27 / 13%), rgb(0 0 0 / 46%));
  --hui-shadow-color-large: light-dark(rgb(73 49 27 / 20%), rgb(0 0 0 / 58%));
  --hui-shadow-small: 0 1px 2px var(--hui-shadow-color-small);
  --hui-shadow-medium: 0 14px 36px var(--hui-shadow-color-medium);
  --hui-shadow-large: 0 24px 70px var(--hui-shadow-color-large);
}

:root[data-theme="light"] {
  color-scheme: light;
}

:root[data-theme="dark"] {
  color-scheme: dark;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --hui-duration-fast: 0ms;
    --hui-duration-standard: 0ms;
    --hui-duration-slow: 0ms;
    --hui-duration-spinner-cycle: 1ms;
    --hui-duration-skeleton-cycle: 1ms;
  }
}