/* VTS Design System — Semantic tokens (Layer 2)
   Role-based aliases that map primitives to UI intent.
   Components consume ONLY these. Light theme is the :root default;
   .p-dark flips surface/content/text; density scopes retune field padding.
   Prefixed --p-* to match PrimeNG's runtime CSS variables. */

:root {
  /* ---- Primary (VTS Red) ---- */
  --p-primary-50: var(--p-vtsred-50);
  --p-primary-100: var(--p-vtsred-100);
  --p-primary-200: var(--p-vtsred-200);
  --p-primary-300: var(--p-vtsred-300);
  --p-primary-400: var(--p-vtsred-400);
  --p-primary-500: var(--p-vtsred-500);
  --p-primary-600: var(--p-vtsred-600);
  --p-primary-700: var(--p-vtsred-700);
  --p-primary-800: var(--p-vtsred-800);
  --p-primary-900: var(--p-vtsred-900);
  --p-primary-950: var(--p-vtsred-950);
  --p-primary-color: var(--p-vtsred-500);
  --p-primary-contrast-color: var(--p-white);
  --p-primary-hover-color: var(--p-vtsred-600);
  --p-primary-active-color: var(--p-vtsred-700);

  /* ---- Surface ramp (neutral) ---- */
  --p-surface-0: var(--p-slate-0);
  --p-surface-50: var(--p-slate-50);
  --p-surface-100: var(--p-slate-100);
  --p-surface-200: var(--p-slate-200);
  --p-surface-300: var(--p-slate-300);
  --p-surface-400: var(--p-slate-400);
  --p-surface-500: var(--p-slate-500);
  --p-surface-600: var(--p-slate-600);
  --p-surface-700: var(--p-slate-700);
  --p-surface-800: var(--p-slate-800);
  --p-surface-900: var(--p-slate-900);
  --p-surface-950: var(--p-slate-950);

  /* ---- Text ---- */
  --p-text-color: var(--p-surface-700);
  --p-text-hover-color: var(--p-surface-800);
  --p-text-muted-color: var(--p-surface-500);
  --p-text-hover-muted-color: var(--p-surface-600);

  /* ---- Content (cards, panels, lists) ---- */
  --p-content-background: var(--p-surface-0);
  --p-content-hover-background: var(--p-surface-100);
  --p-content-border-color: var(--p-surface-200);
  --p-content-color: var(--p-text-color);
  --p-content-hover-color: var(--p-text-hover-color);
  --p-content-border-radius: var(--p-border-radius-md);

  /* ---- Overlays (dialogs, popovers, menus) ---- */
  --p-overlay-select-background: var(--p-surface-0);
  --p-overlay-select-border-color: var(--p-surface-200);
  --p-overlay-select-border-radius: var(--p-border-radius-md);
  --p-overlay-select-color: var(--p-text-color);
  --p-overlay-popover-background: var(--p-surface-0);
  --p-overlay-popover-border-color: var(--p-surface-200);
  --p-overlay-popover-border-radius: var(--p-border-radius-xl);
  --p-overlay-popover-color: var(--p-text-color);
  --p-overlay-popover-padding: 12px;
  --p-overlay-modal-background: var(--p-surface-0);
  --p-overlay-modal-border-color: var(--p-surface-200);
  --p-overlay-modal-border-radius: var(--p-border-radius-xl);
  --p-overlay-modal-color: var(--p-text-color);
  --p-overlay-modal-padding: 20px;

  /* ---- List (menus, dropdowns, options) ---- */
  --p-list-padding: 4px 4px;
  --p-list-gap: 2px;
  --p-list-option-padding: 6px 12px;
  --p-list-option-border-radius: var(--p-border-radius-sm);
  --p-list-option-color: var(--p-text-color);
  --p-list-option-focus-background: var(--p-surface-100);
  --p-list-option-focus-color: var(--p-text-hover-color);
  --p-list-option-selected-background: var(--p-highlight-background);
  --p-list-option-selected-color: var(--p-highlight-color);
  --p-list-option-selected-focus-background: var(--p-highlight-focus-background);
  --p-list-option-selected-focus-color: var(--p-highlight-focus-color);
  --p-list-option-group-color: var(--p-text-muted-color);
  --p-list-option-group-font-weight: 600;

  /* ---- Form field ---- */
  --p-form-field-background: var(--p-surface-0);
  --p-form-field-disabled-background: var(--p-surface-200);
  --p-form-field-filled-background: var(--p-surface-50);
  --p-form-field-filled-hover-background: var(--p-surface-50);
  --p-form-field-filled-focus-background: var(--p-surface-50);
  --p-form-field-border-color: var(--p-surface-300);
  --p-form-field-hover-border-color: var(--p-surface-400);
  --p-form-field-focus-border-color: var(--p-primary-color);
  --p-form-field-invalid-border-color: var(--p-red-400);
  --p-form-field-color: var(--p-surface-700);
  --p-form-field-disabled-color: var(--p-surface-500);
  --p-form-field-placeholder-color: var(--p-surface-500);
  --p-form-field-invalid-placeholder-color: var(--p-red-600);
  --p-form-field-icon-color: var(--p-surface-400);
  --p-form-field-border-radius: var(--p-border-radius-md);
  --p-form-field-padding-x: 10.5px;
  --p-form-field-padding-y: 7px;
  --p-form-field-sm-padding-x: 8.75px;
  --p-form-field-sm-padding-y: 5.25px;
  --p-form-field-lg-padding-x: 12.25px;
  --p-form-field-lg-padding-y: 8.75px;
  --p-form-field-font-size: 14px;
  --p-form-field-sm-font-size: 12.25px;
  --p-form-field-lg-font-size: 15.75px;

  /* ---- Highlight (selected states) ---- */
  --p-highlight-background: var(--p-vtsred-50);
  --p-highlight-color: var(--p-vtsred-700);
  --p-highlight-focus-background: var(--p-vtsred-100);
  --p-highlight-focus-color: var(--p-vtsred-800);

  /* ---- Focus ring (2px brand-red) ---- */
  --p-focus-ring-width: 2px;
  --p-focus-ring-offset: 2px;
  --p-focus-ring-style: solid; /* @kind other */
  --p-focus-ring-color: var(--p-primary-color);
  --p-focus-ring-shadow: 0 0 0 2px var(--p-surface-0), 0 0 0 4px var(--p-primary-color);

  /* ---- Mask / scrim ---- */
  --p-mask-background: rgba(2, 6, 23, 0.4);
  --p-mask-color: var(--p-surface-200);

  /* ---- Status role colors ---- */
  --p-success-color: var(--p-green-500);
  --p-success-contrast-color: var(--p-white);
  --p-success-bg: var(--p-green-50);
  --p-success-border: var(--p-green-200);
  --p-success-text: var(--p-green-700);
  --p-info-color: var(--p-sky-500);
  --p-info-contrast-color: var(--p-white);
  --p-info-bg: var(--p-sky-50);
  --p-info-border: var(--p-sky-200);
  --p-info-text: var(--p-sky-700);
  --p-warn-color: var(--p-amber-500);
  --p-warn-contrast-color: var(--p-white);
  --p-warn-bg: var(--p-amber-50);
  --p-warn-border: var(--p-amber-200);
  --p-warn-text: var(--p-amber-700);
  --p-danger-color: var(--p-red-500);
  --p-danger-contrast-color: var(--p-white);
  --p-danger-bg: var(--p-red-50);
  --p-danger-border: var(--p-red-200);
  --p-danger-text: var(--p-red-700);
  --p-help-color: var(--p-purple-500);
  --p-help-contrast-color: var(--p-white);
  --p-help-bg: var(--p-purple-50);
  --p-help-border: var(--p-purple-200);
  --p-help-text: var(--p-purple-700);
  --p-secondary-color: var(--p-surface-100);
  --p-secondary-contrast-color: var(--p-surface-600);
  --p-contrast-color: var(--p-surface-950);
  --p-contrast-contrast-color: var(--p-surface-0);

  /* ---- Disabled opacity ---- */
  --p-disabled-opacity: 0.6; /* @kind other */
  --p-icon-size: 1rem;
  --p-anchor-gutter: 2px;
  --p-transition-duration: 0.2s; /* @kind other */
}

/* ============ DARK THEME ============ */
.p-dark {
  --p-primary-color: var(--p-vtsred-400);
  --p-primary-contrast-color: var(--p-surface-900);
  --p-primary-hover-color: var(--p-vtsred-300);
  --p-primary-active-color: var(--p-vtsred-200);

  --p-surface-0: var(--p-slate-950);
  --p-surface-50: rgb(15, 23, 42);
  --p-surface-100: rgb(23, 33, 55);
  --p-surface-200: rgb(35, 47, 74);
  --p-surface-300: rgb(51, 65, 96);
  --p-surface-400: rgb(71, 85, 118);
  --p-surface-500: rgb(100, 116, 148);
  --p-surface-600: rgb(148, 163, 190);
  --p-surface-700: rgb(203, 213, 232);
  --p-surface-800: rgb(226, 232, 245);
  --p-surface-900: rgb(241, 245, 252);
  --p-surface-950: rgb(248, 250, 255);

  --p-text-color: var(--p-surface-0-fg, rgba(255, 255, 255, 0.87));
  --p-text-hover-color: rgba(255, 255, 255, 0.95);
  --p-text-muted-color: rgba(255, 255, 255, 0.6);
  --p-text-hover-muted-color: rgba(255, 255, 255, 0.7);

  --p-content-background: rgb(15, 23, 42);
  --p-content-hover-background: rgb(23, 33, 55);
  --p-content-border-color: rgb(35, 47, 74);

  --p-overlay-select-background: rgb(15, 23, 42);
  --p-overlay-popover-background: rgb(15, 23, 42);
  --p-overlay-modal-background: rgb(15, 23, 42);
  --p-overlay-select-border-color: rgb(35, 47, 74);
  --p-overlay-popover-border-color: rgb(35, 47, 74);
  --p-overlay-modal-border-color: rgb(35, 47, 74);

  --p-form-field-background: rgba(255, 255, 255, 0.03);
  --p-form-field-disabled-background: rgb(35, 47, 74);
  --p-form-field-filled-background: rgba(255, 255, 255, 0.03);
  --p-form-field-filled-hover-background: rgba(255, 255, 255, 0.05);
  --p-form-field-filled-focus-background: rgba(255, 255, 255, 0.05);
  --p-form-field-border-color: rgb(51, 65, 96);
  --p-form-field-hover-border-color: rgb(71, 85, 118);
  --p-form-field-color: rgba(255, 255, 255, 0.87);
  --p-form-field-placeholder-color: rgba(255, 255, 255, 0.5);

  --p-highlight-background: color-mix(in srgb, var(--p-vtsred-400) 16%, transparent);
  --p-highlight-color: rgba(255, 255, 255, 0.87);
  --p-highlight-focus-background: color-mix(in srgb, var(--p-vtsred-400) 24%, transparent);
  --p-highlight-focus-color: rgba(255, 255, 255, 0.87);

  --p-content-color: var(--p-text-color);
  --p-mask-background: rgba(0, 0, 0, 0.6);
}

/* ============ DENSITY SCOPES ============ */
[data-density="compact"] {
  --p-form-field-padding-x: 8.75px;
  --p-form-field-padding-y: 5.25px;
  --p-list-option-padding: 4px 10px;
  --p-overlay-modal-padding: 16px;
  --p-overlay-popover-padding: 10px;
}

[data-density="comfortable"] {
  --p-form-field-padding-x: 12.25px;
  --p-form-field-padding-y: 8.75px;
  --p-list-option-padding: 9px 14px;
  --p-overlay-modal-padding: 24px;
  --p-overlay-popover-padding: 14px;
}