/*
  Design tokens — modifie ces variables pour personnaliser le kit entierement.
  Elles traversent le Shadow DOM de chaque composant, donc un seul endroit a éditer.
*/

:root {
  color-scheme: light;

  --ui-font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --ui-font-size-sm: 0.8125rem;
  --ui-font-size-md: 0.9375rem;
  --ui-font-size-lg: 1.0625rem;
  --ui-line-height: 1.5;

  --ui-radius-sm: 4px;
  --ui-radius-md: 6px;
  --ui-radius-lg: 10px;
  --ui-radius-xl: 14px;
  --ui-radius-full: 999px;

  --ui-spacing-xs: 4px;
  --ui-spacing-sm: 8px;
  --ui-spacing-md: 12px;
  --ui-spacing-lg: 16px;
  --ui-spacing-xl: 24px;

  --ui-transition-fast: 120ms ease;
  --ui-transition: 180ms ease;

  --ui-color-primary: #3f7ce0;
  --ui-color-primary-hover: #5b8fe6;
  --ui-color-primary-active: #3467c4;
  --ui-color-primary-soft: #e8f0fd;

  --ui-color-success: #2fa66a;
  --ui-color-success-soft: #e5f6ed;
  --ui-color-warning: #d98c1a;
  --ui-color-warning-soft: #fdf1e0;
  --ui-color-danger: #dd4b4b;
  --ui-color-danger-soft: #fceaea;
  --ui-color-info: #7a8697;
  --ui-color-info-soft: #eef0f2;

  --ui-color-bg: #ffffff;
  --ui-color-bg-elevated: #ffffff;
  --ui-color-bg-subtle: #f5f6f8;
  --ui-color-border: #e0e3e8;
  --ui-color-border-hover: #c6cbd4;

  --ui-color-text: #1c2126;
  --ui-color-text-secondary: #5b6470;
  --ui-color-text-placeholder: #9aa2ad;
  --ui-color-text-on-primary: #ffffff;

  --ui-color-disabled-bg: #f2f3f5;
  --ui-color-disabled-text: #b6bcc4;
  --ui-color-disabled-border: #e5e7eb;

  --ui-shadow-sm: 0 1px 2px rgba(20, 23, 28, 0.06);
  --ui-shadow-md: 0 4px 12px rgba(20, 23, 28, 0.10);
  --ui-shadow-lg: 0 12px 32px rgba(20, 23, 28, 0.16);

  --ui-overlay-bg: rgba(15, 17, 21, 0.45);

  --ui-focus-ring: 0 0 0 3px color-mix(in srgb, var(--ui-color-primary) 35%, transparent);
}

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

  --ui-color-primary: #5b8fe6;
  --ui-color-primary-hover: #78a3ec;
  --ui-color-primary-active: #4a78cc;
  --ui-color-primary-soft: #1c2c47;

  --ui-color-success: #45c185;
  --ui-color-success-soft: #163826;
  --ui-color-warning: #e7a13d;
  --ui-color-warning-soft: #3a2c12;
  --ui-color-danger: #e6696e;
  --ui-color-danger-soft: #3a1c1e;
  --ui-color-info: #8f9aa8;
  --ui-color-info-soft: #24272d;

  --ui-color-bg: #16181d;
  --ui-color-bg-elevated: #1e2126;
  --ui-color-bg-subtle: #202329;
  --ui-color-border: #2d3138;
  --ui-color-border-hover: #3c414a;

  --ui-color-text: #eef0f2;
  --ui-color-text-secondary: #a2a9b3;
  --ui-color-text-placeholder: #6b7280;
  --ui-color-text-on-primary: #ffffff;

  --ui-color-disabled-bg: #24272d;
  --ui-color-disabled-text: #565b64;
  --ui-color-disabled-border: #2d3138;

  --ui-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.24);
  --ui-shadow-md: 0 4px 14px rgba(0, 0, 0, 0.36);
  --ui-shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.48);

  --ui-overlay-bg: rgba(0, 0, 0, 0.6);
}