/*
 * STAMBE site-wide design tokens.
 * UI-01 source of truth: docs/quote-system/UI_UNIFICATION_ROADMAP.md
 * Page styles may consume these semantic values but must not redefine them.
 */
:root {
  color-scheme: light;

  /* RGB channels allow Tailwind opacity modifiers to consume the same values. */
  --ui-rgb-primary: 0 74 198;
  --ui-rgb-primary-hover: 0 62 168;
  --ui-rgb-primary-soft: 219 225 255;
  --ui-rgb-primary-fixed-dim: 180 197 255;
  --ui-rgb-primary-container: 37 99 235;
  --ui-rgb-on-primary: 255 255 255;
  --ui-rgb-on-primary-fixed: 0 23 75;
  --ui-rgb-on-primary-fixed-variant: var(--ui-rgb-primary-hover);
  --ui-rgb-on-primary-container: 238 239 255;

  --ui-rgb-secondary: 86 94 116;
  --ui-rgb-secondary-fixed: 218 226 253;
  --ui-rgb-secondary-fixed-dim: 190 198 224;
  --ui-rgb-secondary-container: var(--ui-rgb-secondary-fixed);
  --ui-rgb-on-secondary: 255 255 255;
  --ui-rgb-on-secondary-fixed: 19 27 46;
  --ui-rgb-on-secondary-fixed-variant: 63 70 92;
  --ui-rgb-on-secondary-container: 92 100 122;

  --ui-rgb-tertiary: 148 55 0;
  --ui-rgb-tertiary-fixed: 255 219 205;
  --ui-rgb-tertiary-fixed-dim: 255 181 150;
  --ui-rgb-tertiary-container: 188 72 0;
  --ui-rgb-on-tertiary: 255 255 255;
  --ui-rgb-on-tertiary-fixed: 54 15 0;
  --ui-rgb-on-tertiary-fixed-variant: 125 45 0;
  --ui-rgb-on-tertiary-container: 255 237 230;

  --ui-rgb-page: 234 238 242;
  --ui-rgb-surface: 255 255 255;
  --ui-rgb-surface-muted: 240 244 248;
  --ui-rgb-surface-subtle: 246 250 254;
  --ui-rgb-surface-strong: 228 233 237;
  --ui-rgb-surface-dim: 214 218 222;
  --ui-rgb-surface-tint: 0 83 219;
  --ui-rgb-text: 23 28 31;
  --ui-rgb-text-muted: 67 70 85;
  --ui-rgb-border: 195 198 215;
  --ui-rgb-border-subtle: 223 227 231;
  --ui-rgb-outline: 115 118 134;
  --ui-rgb-inverse-surface: 44 49 52;
  --ui-rgb-inverse-on-surface: 237 241 245;

  --ui-rgb-success: 20 108 67;
  --ui-rgb-success-soft: 229 247 239;
  --ui-rgb-success-border: 123 200 156;
  --ui-rgb-warning: 138 90 0;
  --ui-rgb-warning-soft: 255 248 220;
  --ui-rgb-warning-border: 230 201 109;
  --ui-rgb-danger: 186 26 26;
  --ui-rgb-danger-soft: 255 218 214;
  --ui-rgb-danger-border: 239 178 178;
  --ui-rgb-on-danger: 255 255 255;
  --ui-rgb-on-danger-soft: 147 0 10;
  --ui-rgb-accent-orange: 178 90 10;
  --ui-rgb-accent-orange-soft: 255 240 220;
  --ui-rgb-accent-purple: 103 80 164;
  --ui-rgb-accent-purple-soft: 238 232 255;
  --ui-rgb-accent-teal: 22 151 166;
  --ui-rgb-accent-teal-soft: 237 249 251;
  --ui-rgb-info-strong: 13 49 88;
  --ui-rgb-warning-highlight: 255 224 138;
  --ui-rgb-axis-length: 152 84 66;
  --ui-rgb-axis-width: 35 116 87;

  --ui-color-primary: rgb(var(--ui-rgb-primary));
  --ui-color-primary-hover: rgb(var(--ui-rgb-primary-hover));
  --ui-color-primary-soft: rgb(var(--ui-rgb-primary-soft));
  --ui-color-primary-container: rgb(var(--ui-rgb-primary-container));
  --ui-color-primary-fixed-dim: rgb(var(--ui-rgb-primary-fixed-dim));
  --ui-color-on-primary: rgb(var(--ui-rgb-on-primary));
  --ui-color-page: rgb(var(--ui-rgb-page));
  --ui-color-surface: rgb(var(--ui-rgb-surface));
  --ui-color-surface-muted: rgb(var(--ui-rgb-surface-muted));
  --ui-color-surface-subtle: rgb(var(--ui-rgb-surface-subtle));
  --ui-color-surface-strong: rgb(var(--ui-rgb-surface-strong));
  --ui-color-text: rgb(var(--ui-rgb-text));
  --ui-color-text-muted: rgb(var(--ui-rgb-text-muted));
  --ui-color-border: rgb(var(--ui-rgb-border));
  --ui-color-border-subtle: rgb(var(--ui-rgb-border-subtle));
  --ui-color-success: rgb(var(--ui-rgb-success));
  --ui-color-success-soft: rgb(var(--ui-rgb-success-soft));
  --ui-color-success-border: rgb(var(--ui-rgb-success-border));
  --ui-color-warning: rgb(var(--ui-rgb-warning));
  --ui-color-warning-soft: rgb(var(--ui-rgb-warning-soft));
  --ui-color-warning-border: rgb(var(--ui-rgb-warning-border));
  --ui-color-danger: rgb(var(--ui-rgb-danger));
  --ui-color-danger-soft: rgb(var(--ui-rgb-danger-soft));
  --ui-color-danger-border: rgb(var(--ui-rgb-danger-border));
  --ui-color-primary-subtle: rgb(var(--ui-rgb-primary-soft) / .35);
  --ui-color-accent-orange: rgb(var(--ui-rgb-accent-orange));
  --ui-color-accent-orange-soft: rgb(var(--ui-rgb-accent-orange-soft));
  --ui-color-accent-purple: rgb(var(--ui-rgb-accent-purple));
  --ui-color-accent-purple-soft: rgb(var(--ui-rgb-accent-purple-soft));
  --ui-color-accent-teal: rgb(var(--ui-rgb-accent-teal));
  --ui-color-accent-teal-soft: rgb(var(--ui-rgb-accent-teal-soft));
  --ui-color-info-strong: rgb(var(--ui-rgb-info-strong));
  --ui-color-warning-highlight: rgb(var(--ui-rgb-warning-highlight));
  --ui-color-axis-length: rgb(var(--ui-rgb-axis-length));
  --ui-color-axis-width: rgb(var(--ui-rgb-axis-width));

  --ui-space-1: 4px;
  --ui-space-2: 8px;
  --ui-space-3: 12px;
  --ui-space-4: 16px;
  --ui-space-5: 20px;
  --ui-space-6: 24px;
  --ui-space-8: 32px;
  --ui-space-10: 40px;
  --ui-space-12: 48px;
  --ui-space-16: 64px;

  --ui-radius-sm: 8px;
  --ui-radius-md: 12px;
  --ui-radius-lg: 16px;
  --ui-radius-xl: 24px;
  --ui-radius-full: 9999px;

  --ui-control-h-compact: 36px;
  --ui-control-h-default: 44px;
  --ui-control-h-prominent: 48px;
  --ui-control-icon: 40px;
  --ui-size-nav-icon: 32px;
  --ui-control-padding-x: 16px;
  --ui-control-padding-x-compact: 12px;
  --ui-control-h-resolved: var(--ui-control-h-default);
  --ui-control-padding-x-resolved: var(--ui-control-padding-x);

  /* UI-02 will replace the CJK system fallbacks with the confirmed bundled font. */
  --ui-font-sans: "Hanken Grotesk", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  --ui-font-cjk: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  --ui-font-weight-regular: 400;
  --ui-font-weight-medium: 500;
  --ui-font-weight-semibold: 600;
  --ui-font-weight-bold: 700;
  --ui-font-weight-extrabold: 800;

  --ui-font-size-display: 32px;
  --ui-line-height-display: 40px;
  --ui-font-size-title-lg: 24px;
  --ui-line-height-title-lg: 32px;
  --ui-font-size-title-md: 20px;
  --ui-line-height-title-md: 28px;
  --ui-font-size-title-sm: 18px;
  --ui-line-height-title-sm: 24px;
  --ui-font-size-body-lg: 16px;
  --ui-line-height-body-lg: 24px;
  --ui-font-size-body: 14px;
  --ui-line-height-body: 20px;
  --ui-font-size-label: 12px;
  --ui-line-height-label: 16px;
  --ui-font-size-caption: 11px;
  --ui-line-height-caption: 14px;

  /* UI-04/X legacy aliases keep independently editable applications on one scale. */
  --ui-type-display-size: var(--ui-font-size-display);
  --ui-type-title-lg-size: var(--ui-font-size-title-lg);
  --ui-type-title-md-size: var(--ui-font-size-title-md);
  --ui-type-title-sm-size: var(--ui-font-size-title-sm);
  --ui-type-body-lg-size: var(--ui-font-size-body-lg);
  --ui-type-body-size: var(--ui-font-size-body);
  --ui-type-label-size: var(--ui-font-size-label);
  --ui-type-caption-size: var(--ui-font-size-caption);
  --ui-color-focus: var(--ui-color-primary);

  --ui-border-width: 1px;
  --ui-focus-width: 3px;
  --ui-focus-ring: 0 0 0 3px rgb(var(--ui-rgb-primary) / .24);
  --ui-shadow-card: 0 4px 20px rgb(var(--ui-rgb-text) / .05);
  --ui-shadow-raised: 0 12px 34px rgb(var(--ui-rgb-text) / .12);
  --ui-shadow-overlay: 0 18px 54px rgb(var(--ui-rgb-text) / .18);

}

[data-app-theme="price"] {
  --ui-rgb-primary: 0 74 198;
  --ui-rgb-primary-hover: 0 62 168;
  --ui-rgb-primary-soft: 219 225 255;
  --ui-rgb-primary-container: 37 99 235;
  --ui-rgb-surface-tint: 0 83 219;
}

[data-app-theme="material"] {
  --ui-rgb-primary: 0 106 114;
  --ui-rgb-primary-hover: 0 86 93;
  --ui-rgb-primary-soft: 215 241 244;
  --ui-rgb-primary-container: 0 121 130;
  --ui-rgb-surface-tint: 0 106 114;
}

[data-density="compact"] {
  --ui-control-h-resolved: var(--ui-control-h-compact);
  --ui-control-padding-x-resolved: var(--ui-control-padding-x-compact);
}

[data-density="default"] {
  --ui-control-h-resolved: var(--ui-control-h-default);
  --ui-control-padding-x-resolved: var(--ui-control-padding-x);
}