/* MiT Ricambi · foundations → semantic roles → component contracts.
 * Legacy palette aliases remain available during incremental migration. */

:root {
  --font-sans: "Satoshi", Arial, sans-serif;
  --brand-blue-900: oklch(34.173% 0.06706 246.624);
  --brand-blue-800: oklch(38.219% 0.07412 246.440);
  --brand-blue-700: oklch(38.405% 0.06203 248.209);
  --brand-blue-600: oklch(48.938% 0.04923 241.700);
  --brand-blue-500: oklch(54.892% 0.04385 247.478);
  --brand-gray-50: oklch(97.818% 0.00342 247.858);
  --brand-gray-75: oklch(96.273% 0.00515 247.877);
  --brand-gray-100: oklch(92.606% 0.00693 247.900);
  --brand-gray-200: oklch(88.199% 0.01228 247.966);
  --brand-gray-300: oklch(79.006% 0.01983 248.079);
  --brand-gray-400: oklch(70.134% 0.02853 246.487);
  --brand-gray-500: oklch(61.648% 0.03656 244.278);
  --brand-white: oklch(99.8% 0.002 245);
  --text-muted: var(--brand-blue-500);
  --slate-50: var(--brand-gray-50);
  --slate-100: var(--brand-gray-100);
  --slate-200: var(--brand-gray-200);
  --slate-300: var(--brand-gray-300);
  --slate-400: var(--brand-gray-400);
  --slate-500: var(--text-muted);
  --slate-600: var(--brand-blue-600);
  --slate-700: var(--brand-blue-700);
  --slate-800: var(--brand-blue-800);
  --slate-900: oklch(29.601% 0.05794 246.607);
  --brand-700: var(--brand-blue-900);
  --red-600: oklch(56.858% 0.16149 27.088);
  --green-600: oklch(53.265% 0.08223 157.874);
  --success-bg: color-mix(in srgb, var(--green-600) 14%, var(--white));
  --success-text: oklch(46.931% 0.08011 156.737);
  --danger-bg: color-mix(in srgb, var(--red-600) 12%, var(--white));
  --danger-text: oklch(47.644% 0.13957 26.544);
  --log-error-text: oklch(83.902% 0.08849 24.234);
  --catalog-source-bg: color-mix(in srgb, var(--brand-blue-900) 5%, var(--white));
  --catalog-source-border: color-mix(in srgb, var(--brand-blue-900) 24%, var(--slate-200));
  --surface: var(--brand-white);
  --white: var(--brand-white);
  --shadow-soft: 0 8px 22px color-mix(in srgb, var(--slate-900) 5%, transparent);
  --shadow-tiny: 0 1px 0 color-mix(in srgb, var(--slate-900) 5%, transparent);
  --focus-ring-color: var(--brand-blue-700);
  --shadow-focus: 0 0 0 2px var(--focus-ring-color);
  --sidebar-expanded: 14.5rem;
  --sidebar-collapsed: 5.25rem;
  --sidebar-collapsed-control: 3.75rem;
  --content-max: 1920px;
  --radius-sm: .375rem;
  --radius-md: .5rem;
  --radius-lg: .75rem;
  --control-min: 2.75rem;
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --transition-ui: 160ms var(--ease-out);
  /* Semantic roles: new components consume these, never a palette index. */
  --color-canvas: var(--brand-gray-50);
  --color-surface: var(--brand-white);
  --color-surface-subtle: var(--brand-gray-75);
  --color-text: var(--slate-900);
  --color-text-secondary: var(--brand-blue-600);
  --color-text-muted: var(--brand-blue-500);
  --color-text-inverse: var(--brand-white);
  --color-border: var(--brand-gray-200);
  --color-border-subtle: var(--brand-gray-100);
  --color-border-control: var(--brand-gray-500);
  --color-action: var(--brand-blue-900);
  --color-action-hover: var(--brand-blue-800);
  --color-loader: #1e3a5f;
  --color-loader-dark: #60a5fa;
  --color-selected: color-mix(in oklch, var(--color-action) 7%, var(--color-surface));
  --color-danger: var(--danger-text);
  --color-danger-hover: color-mix(in oklch, var(--danger-text) 85%, var(--slate-900));
  --warning-text: oklch(43% .095 68);
  --warning-bg: oklch(96% .035 85);
  --warning-border: oklch(78% .08 80);
  --info-text: var(--brand-blue-800);
  --info-bg: color-mix(in oklch, var(--info-text) 7%, var(--color-surface));
  --info-border: color-mix(in oklch, var(--info-text) 30%, var(--color-border));
  /* Fixed product type scale: 12 / 14 / 16 / 18 / 20 / 24 / 32 px. */
  --text-xs: .75rem;
  --text-sm: .875rem;
  --text-md: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.25rem;
  --text-2xl: 1.5rem;
  --text-3xl: 2rem;
  --text-page: var(--text-3xl);
  --text-section: var(--text-xl);
  --text-subsection: var(--text-md);
  --text-body: var(--text-md);
  --text-control: var(--text-sm);
  --text-label: var(--text-sm);
  --text-caption: var(--text-xs);
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;
  --leading-heading: 1.25;
  --leading-compact: 1.35;
  --leading-body: 1.5;
  --tracking-heading: -.025em;
  --tracking-label: .05em;
  --measure-prose: 70ch;
  /* Geometry: a 4px rhythm, with 2px reserved for optical adjustments. */
  --space-3xs: .125rem;
  --space-2xs: .25rem;
  --space-xs: .5rem;
  --space-sm: .75rem;
  --space-md: 1rem;
  --space-lg: 1.25rem;
  --space-xl: 1.5rem;
  --space-2xl: 2rem;
  --space-3xl: 3rem;
  --space-4xl: 4rem;
  --icon-sm: 1rem;
  --icon-md: 1.25rem;
  --icon-lg: 1.5rem;
  --icon-xl: 2rem;
  --icon-display: 2.5rem;
  --control-compact: 2.25rem;
  --control-padding-block: var(--space-xs);
  --control-padding-inline: var(--space-sm);
  /* Density contracts: related content stays tight; sections have room. */
  --page-gutter: var(--space-2xl);
  --panel-padding: var(--space-xl);
  --section-gap: var(--space-xl);
  --field-gap: var(--space-md);
  --table-cell-block: var(--space-sm);
  --table-cell-inline: var(--space-sm);
  --control-touch: 2.75rem;
  --mobile-topbar-height: 4.25rem;
  --z-mobile-header: 40;
  --z-navigation-scrim: 49;
  --opacity-disabled: .55;
  --duration-fast: 160ms;
  --duration-normal: 220ms;
  --z-sticky: 24;
  --z-navigation: 80;
  --z-overlay: 100;
  --z-popover: 200;
  --z-skip-link: 300;
}

@media (max-width: 1180px) {
  :root {
    --page-gutter: var(--space-xl);
    --panel-padding: var(--space-lg);
  }
}

@media (max-width: 900px) {
  :root {
    --page-gutter: var(--space-lg);
  }
}

@media (max-width: 640px) {
  :root {
    --page-gutter: var(--space-md);
    --panel-padding: var(--space-md);
  }
}