/* Shared design tokens and light palette. Components consume these roles;
   responsive typography is defined in responsive-typography.css. */
:root,
:root[data-app-theme="light"] {
  color-scheme: light;

  --app-font-family: "Inter", "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
  --app-weight-regular: 400;
  --app-weight-medium: 500;
  --app-weight-semibold: 600;
  --app-weight-heading: 650;
  --app-radius: 10px;
  --app-radius-small: 6px;
  --app-space-1: 4px;
  --app-space-2: 8px;
  --app-space-3: 12px;
  --app-space-4: 16px;
  --app-space-5: 24px;
  --app-control-height: 40px;
  --app-field-height: 46px;
  --app-panel-padding: 16px;
  --app-card-gap: 16px;

  /* Warm neutral surfaces; blue actions; green is reserved for success. */
  --color-canvas: #F7F6F3;
  --color-surface: #FFFFFF;
  --color-surface-raised: #F5F6F7;
  --color-surface-hover: #EAF0F5;
  --color-surface-inset: #F5F5F3;
  --color-action-soft: #EAF0F5;
  --color-action-soft-hover: #DDE7F0;
  --color-action-text: #3F5F7D;
  --color-border-strong: #C5CFD8;
  --color-border-subtle: #E9ECEE;
  --color-text: #202A33;
  --color-text-muted: #66727D;
  --color-border: #DDE2E5;
  --color-action-primary: #3F5F7D;
  --color-action-primary-hover: #334E68;
  --color-focus: #6F9DC3;
  --color-accent-warm: #B48A55;
  --color-status-info: #3F6F9F;
  --color-status-success: #2F7D62;
  --color-status-warning: #A66A16;
  --color-status-danger: #B94A48;
  --color-status-info-surface: #E7EFF6;
  --color-status-info-border: #B9CDDE;
  --color-status-info-text: #315779;
  --color-status-success-surface: #E2F1EB;
  --color-status-success-border: #AFD1C3;
  --color-status-success-text: #245F4B;
  --color-status-warning-surface: #FFF3D6;
  --color-status-warning-border: #E2C382;
  --color-status-warning-text: #765000;
  --color-status-danger-surface: #F7E5E4;
  --color-status-danger-border: #DEB8B6;
  --color-status-danger-text: #8D3735;
  /* Compatibility aliases for existing components. */
  --background-color: var(--color-canvas);
  --surface-color: var(--color-surface);
  --border-color: var(--color-border);
  --input-bg: #FFFFFF;
  --text-color: var(--color-text);
  --text-primary: var(--color-text);
  --text-secondary: var(--color-text-muted);

  --primary-color: var(--color-action-primary);
  --primary-color-hover: var(--color-action-primary-hover);
  --secondary-color: var(--color-focus);
  --accent-color: var(--color-accent-warm);
  --accent-color-transparent: rgba(180, 138, 85, .18);
  --on-primary-color: #FFFFFF;

  --surface-hover-color: var(--color-surface-hover);
  --surface-muted-color: var(--color-surface-raised);
  --table-head-bg: var(--color-surface-raised);
  --focus-ring-color: rgba(111, 157, 195, .24);
  --input-focus-shadow: rgba(111, 157, 195, .20);

  --soft-shadow: 0 8px 24px rgba(32, 42, 51, .06);
  --soft-shadow-sm: 0 2px 8px rgba(32, 42, 51, .04);
  --app-focus-ring: 0 0 0 3px var(--focus-ring-color);

  --app-scrollbar-thumb: rgba(63, 95, 125, .46);
  --app-scrollbar-thumb-hover: rgba(63, 95, 125, .70);
  --app-scrollbar-track: transparent;
  --docu-scrollbar-thumb: #3F5F7D;
  --docu-scrollbar-thumb-hover: #6F9DC3;
  --docu-scrollbar-track: #DDE2E5;
  --docu-compliance-scrollbar-thumb: #3F5F7D;
  --docu-compliance-scrollbar-thumb-hover: #6F9DC3;
  --docu-compliance-scrollbar-track: #DDE2E5;

  --bs-body-bg: var(--background-color);
  --bs-body-color: var(--text-color);
  --bs-border-color: var(--border-color);
  --bs-secondary-color: var(--text-secondary);
  --bs-tertiary-bg: var(--surface-color);
  --bs-primary: var(--primary-color);
  --bs-primary-rgb: 63, 95, 125;
  --bs-link-color: var(--primary-color);
  --bs-link-hover-color: var(--primary-color-hover);

  --fc-page-bg-color: var(--surface-color);
  --fc-border-color: var(--border-color);
  --fc-neutral-bg-color: rgba(111, 157, 195, .08);
  --fc-list-event-hover-bg-color: var(--surface-hover-color);
  --fc-today-bg-color: rgba(180, 138, 85, .16);
}