/*
 * Platform design system
 *
 * This file owns the shared visual language only. Administrative and public
 * components extend these values in admin-reference.css and public-system.css.
 */
:root {
  --ds-font: 'Noto Sans Georgian', 'Segoe UI', Arial, sans-serif;
  --ds-primary: #333f6b;
  --ds-primary-strong: #212a4d;
  --ds-accent: #d9a441;
  --ds-surface: #ffffff;
  --ds-canvas: #f7f7fb;
  --ds-surface-soft: #f1f3f9;
  --ds-primary-soft: #edf2fa;
  --ds-accent-soft: #fbf2df;
  --ds-text: #232842;
  --ds-muted: #68708b;
  --ds-line: #e3e4f0;
  --ds-success: #16705d;
  --ds-warning: #9a6c15;
  --ds-danger: #b33d3d;
  --ds-info: #2f669f;
  --ds-space-1: 4px;
  --ds-space-2: 8px;
  --ds-space-3: 12px;
  --ds-space-4: 16px;
  --ds-space-5: 20px;
  --ds-space-6: 24px;
  --ds-page-padding: 24px;
  --ds-section-gap: 24px;
  --ds-card-padding: 20px;
  --ds-form-gap: 16px;
  --ds-table-cell-x: 16px;
  --ds-table-cell-y: 12px;
  --ds-radius-sm: 6px;
  --ds-radius: 8px;
  --ds-radius-pill: 999px;
  --ds-shadow: 0 2px 10px rgba(33, 42, 77, .035);
  --ds-shadow-hover: 0 8px 22px rgba(33, 42, 77, .09);
  --ds-focus-ring: rgba(217, 164, 65, .28);
  --ds-transition: 150ms ease;

  /* Compatibility aliases used by the existing Laravel and React screens. */
  --platform-font: var(--ds-font);
  --panel-navy: var(--ds-primary-strong);
  --panel-teal: var(--ds-primary);
  --panel-coral: var(--ds-accent);
  --panel-surface: var(--ds-canvas);
  --panel-line: var(--ds-line);
  --panel-text: var(--ds-text);
  --panel-muted: var(--ds-muted);
  --panel-radius: var(--ds-radius);
  --panel-shadow: var(--ds-shadow);
  --pm-ink: var(--ds-text);
  --pm-blue: var(--ds-primary);
  --pm-blue-dark: var(--ds-primary-strong);
  --pm-mint: var(--ds-accent);
  --pm-bg: var(--ds-canvas);
  --pm-line: var(--ds-line);
  --pm-muted: var(--ds-muted);
  --pm-shadow: var(--ds-shadow);

}

:is(.app-shell, .basic-shell, .login-shell),
:is(.app-shell, .basic-shell, .login-shell) :is(button, input, select, textarea) {
  font-family: var(--ds-font);
}

:is(.app-shell, .basic-shell, .login-shell) :focus-visible {
  outline: 2px solid var(--ds-accent);
  outline-offset: 3px;
}

:is(.app-shell, .basic-shell, .login-shell) ::selection {
  background: var(--ds-primary);
  color: var(--ds-surface);
}

:is(.app-shell, .basic-shell, .login-shell) :is(button, a, input, select, textarea) {
  transition: color var(--ds-transition), background-color var(--ds-transition), border-color var(--ds-transition), box-shadow var(--ds-transition);
}

@media (prefers-reduced-motion: reduce) {
  :is(.app-shell, .basic-shell, .login-shell) * {
    scroll-behavior: auto !important;
    transition-duration: 0ms !important;
  }
}