/* CRModel design tokens — porting from restyling/tokens.css
   Loaded after Bootstrap so that var(--ink-1) etc. are available
   to every downstream stylesheet and to inline styles in templates. */

:root {
  /* Brand colors — derived from logo gradient */
  --brand-pink: #e94b7c;
  --brand-orange: #f59e42;
  --brand-purple: #6b4fbb;
  --brand-gradient: linear-gradient(135deg, #e94b7c 0%, #f59e42 50%, #6b4fbb 100%);
  --brand-gradient-soft: linear-gradient(135deg, #fde7ef 0%, #fef3e6 50%, #ece6f7 100%);

  /* Section accents — one per main screen, harmonized with brand */
  --sec-progetti: #6b4fbb;
  --sec-progetti-50: #f3effb;
  --sec-progetti-100: #e3dbf4;
  --sec-dashboard: #2563eb;
  --sec-dashboard-50: #eff5ff;
  --sec-dashboard-100: #dbe7fe;
  --sec-inviti: #4f6df5;
  --sec-inviti-50: #eef1fe;
  --sec-inviti-100: #dde2fc;
  --sec-allegati: #0e9384;
  --sec-allegati-50: #ecfdf6;
  --sec-allegati-100: #ccf3e6;
  --sec-report: #16a34a;
  --sec-report-50: #effaf1;
  --sec-report-100: #d6f0db;
  --sec-profile: #475569;
  --sec-profile-50: #f1f5f9;
  --sec-profile-100: #e2e8f0;

  /* Neutrals */
  --bg: #f7f6f4;
  --surface: #ffffff;
  --surface-soft: #fbfaf8;
  --border: #ecebe7;
  --border-strong: #d9d6d0;
  --ink-1: #16151a;
  --ink-2: #4a4854;
  --ink-3: #7d7a86;
  --ink-4: #a8a4b0;

  /* Status */
  --green: #16a34a;
  --green-50: #effaf1;
  --amber: #d97706;
  --amber-50: #fff8eb;
  --red: #dc2626;
  --red-50: #fef2f2;

  /* Rating colors (gauge) */
  --rate-1: #16a34a;
  --rate-2: #65a30d;
  --rate-3: #ca8a04;
  --rate-4: #ea580c;
  --rate-5: #dc2626;

  /* Type */
  --font-display: "Plus Jakarta Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-body: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  /* Shape */
  --radius-sm: 8px;
  --radius: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;

  /* Elevation — subtle, not shadowy */
  --shadow-xs: 0 1px 2px rgba(20, 20, 30, 0.04);
  --shadow-sm: 0 1px 2px rgba(20, 20, 30, 0.04), 0 1px 3px rgba(20, 20, 30, 0.06);
  --shadow-md: 0 4px 12px rgba(20, 20, 30, 0.06), 0 1px 3px rgba(20, 20, 30, 0.04);
  --shadow-lg: 0 12px 32px rgba(20, 20, 30, 0.08), 0 2px 6px rgba(20, 20, 30, 0.04);

  /* Density */
  --pad-sm: 12px;
  --pad: 20px;
  --pad-lg: 28px;

  /* Bootstrap variable overrides (consumed by Bootstrap 5.x components) */
  --bs-body-font-family: var(--font-body);
  --bs-body-color: var(--ink-1);
  --bs-body-bg: var(--bg);
  --bs-border-color: var(--border);
  --bs-border-radius: var(--radius);
  --bs-border-radius-sm: var(--radius-sm);
  --bs-border-radius-lg: var(--radius-lg);
  --bs-primary: var(--sec-progetti);
  --bs-primary-rgb: 107, 79, 187;
  --bs-secondary: var(--ink-2);
  --bs-success: var(--green);
  --bs-success-rgb: 22, 163, 74;
  --bs-warning: var(--amber);
  --bs-warning-rgb: 217, 119, 6;
  --bs-danger: var(--red);
  --bs-danger-rgb: 220, 38, 38;
  --bs-info: var(--sec-dashboard);
  --bs-info-rgb: 37, 99, 235;
}