/*!
 * Central design tokens for the Portale webapp.
 * Shared across SB Admin 2 (Bootstrap 4), Kanban, landing New Age (Bootstrap 5),
 * authentication views and printable/PDF templates.
 */

@import url('https://fonts.googleapis.com/css?family=Nunito:200,300,400,600,700,800,900&display=swap');

:root {
  /* Typography */
  --font-sans: 'Nunito', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;

  /* Palette */
  --color-primary: #4e73df;
  --color-primary-600: #3c5ac7;
  --color-primary-700: #2e59d9;
  --color-accent: #6f42c1;
  --color-accent-2: #1cc88a;
  --color-accent-2-strong: #13855c;
  --color-info: #36b9cc;
  --color-info-strong: #258391;
  --color-info-rgb: 54, 185, 204;
  --color-warning: #f6c23e;
  --color-warning-strong: #dda20a;
  --color-warning-rgb: 246, 194, 62;
  --color-danger: #e74a3b;
  --color-danger-strong: #be2617;
  --color-danger-rgb: 231, 74, 59;
  --color-neutral: #9ca3af;
  --color-neutral-strong: #6b7280;
  --color-primary-rgb: 78, 115, 223;
  --color-accent-rgb: 111, 66, 193;
  --color-accent-2-rgb: 28, 200, 138;

  --color-bg: #f8f9fc;
  --color-surface: #ffffff;
  --color-surface-muted: #eef1f8;
  --color-text: #5a5c69;
  --color-muted: #858796;
  --color-border: #e3e6f0;
  --color-border-strong: #d1d3e2;

  /* Radii */
  --radius-sm: 0.35rem;
  --radius-md: 0.5rem;
  --radius-lg: 0.75rem;
  --radius-xl: 1rem;

  /* Shadows */
  --shadow-1: 0 0.15rem 0.6rem rgba(15, 23, 42, 0.08);
  --shadow-2: 0 0.35rem 1.75rem rgba(15, 23, 42, 0.12);
  --shadow-3: 0 0.65rem 2.75rem rgba(15, 23, 42, 0.16);

  /* Spacing */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;

  /* Focus */
  --focus-ring-color: rgba(var(--color-primary-rgb), 0.35);
  --focus-ring: 0 0 0 0.2rem var(--focus-ring-color);

  /* Overlays */
  --overlay-strong: rgba(18, 21, 35, 0.65);
  --overlay-soft: rgba(58, 59, 69, 0.15);
}

[data-theme="dark"],
html.dark-mode {
  --color-primary: #93c5fd;
  --color-primary-600: #60a5fa;
  --color-primary-700: #3b82f6;
  --color-accent: #c084fc;
  --color-accent-2: #34d399;
  --color-accent-2-strong: #059669;
  --color-info: #67e8f9;
  --color-info-strong: #06b6d4;
  --color-info-rgb: 103, 232, 249;
  --color-warning: #facc15;
  --color-warning-strong: #eab308;
  --color-warning-rgb: 250, 204, 21;
  --color-danger: #f87171;
  --color-danger-strong: #ef4444;
  --color-danger-rgb: 248, 113, 113;
  --color-neutral: #cbd5e1;
  --color-neutral-strong: #94a3b8;
  --color-primary-rgb: 147, 197, 253;
  --color-accent-rgb: 192, 132, 252;
  --color-accent-2-rgb: 52, 211, 153;

  --color-bg: #111827;
  --color-surface: #1f2937;
  --color-surface-muted: #0f172a;
  --color-text: #e5e7eb;
  --color-muted: #9ca3af;
  --color-border: rgba(148, 163, 184, 0.35);
  --color-border-strong: rgba(148, 163, 184, 0.55);

  --shadow-1: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.35);
  --shadow-2: 0 0.45rem 1.5rem rgba(0, 0, 0, 0.45);
  --shadow-3: 0 0.65rem 2.5rem rgba(0, 0, 0, 0.5);

  --focus-ring-color: rgba(var(--color-primary-rgb), 0.5);
}