/* =========================================================
   beres.id — Design Tokens
   Material + Glassmorphism + Vibrant SaaS Dashboard
   See /design.md for the full design system spec.
   ========================================================= */

:root {
  /* ---- Brand / accent colors ---- */
  --color-primary: #6366f1;
  --color-primary-hover: #4f46e5;
  --color-primary-soft: rgba(99, 102, 241, 0.16);
  --color-secondary: #8b5cf6;
  --color-secondary-hover: #7c3aed;
  --color-accent: #06b6d4;
  --color-accent-pink: #ec4899;
  --color-accent-orange: #f97316;
  /* Care app tile/module color — maroon, matching Care's own frontend brand token. */
  --color-maroon: #7f1d1d;
  --color-maroon-hover: #671616;

  /* ---- Semantic status colors ---- */
  --color-success: #22c55e;
  --color-success-soft: rgba(34, 197, 94, 0.16);
  --color-warning: #f59e0b;
  --color-warning-soft: rgba(245, 158, 11, 0.16);
  --color-danger: #ef4444;
  --color-danger-soft: rgba(239, 68, 68, 0.16);
  --color-info: #06b6d4;
  --color-info-soft: rgba(6, 182, 212, 0.16);

  /* ---- Background gradient (deep blue -> indigo -> violet) ---- */
  --bg-deep: #0a0e1f;
  --bg-grad-1: #151233;
  --bg-grad-2: #241b54;
  --bg-grad-3: #3b1f66;
  --bg-blob-indigo: rgba(99, 102, 241, 0.42);
  --bg-blob-violet: rgba(139, 92, 246, 0.36);
  --bg-blob-pink: rgba(236, 72, 153, 0.28);
  --bg-blob-cyan: rgba(6, 182, 212, 0.24);
  --bg-blob-orange: rgba(249, 115, 22, 0.18);

  /* Page background photos — swap these two files in /public/images/ (or
     repoint the variables) to change the photo without touching any CSS. */
  --bg-image-auth: url('/images/bg-1.png');
  --bg-image-app: url('/images/bg-2.png');
  --bg-image-overlay: linear-gradient(
    160deg,
    rgba(10, 14, 31, 0.86) 0%,
    rgba(21, 18, 51, 0.8) 35%,
    rgba(36, 27, 84, 0.74) 65%,
    rgba(59, 31, 102, 0.82) 100%
  );

  /* ---- Glass surfaces ---- */
  --glass-bg: rgba(255, 255, 255, 0.09);
  --glass-bg-strong: rgba(255, 255, 255, 0.15);
  --glass-bg-muted: rgba(255, 255, 255, 0.05);
  --glass-border: rgba(255, 255, 255, 0.16);
  --glass-border-strong: rgba(255, 255, 255, 0.28);
  --glass-blur: 20px;
  --glass-blur-sm: 12px;

  /* ---- Semantic surface / text ---- */
  --surface: var(--glass-bg);
  --surface-muted: var(--glass-bg-muted);
  --border: var(--glass-border);
  --text-primary: #f8fafc;
  --text-secondary: rgba(248, 250, 252, 0.74);
  --text-muted: rgba(248, 250, 252, 0.5);
  --text-on-primary: #ffffff;

  /* ---- Radius ---- */
  --radius-sm: 12px;
  --radius-md: 16px;
  --radius-lg: 22px;
  --radius-xl: 28px;
  --radius-full: 999px;

  /* ---- Shadows ---- */
  --shadow-soft: 0 8px 32px rgba(4, 6, 20, 0.28);
  --shadow-elevated: 0 20px 56px rgba(4, 6, 20, 0.4);
  --shadow-glow-primary: 0 8px 24px rgba(99, 102, 241, 0.35);
  --shadow-glow-danger: 0 8px 24px rgba(239, 68, 68, 0.3);

  /* ---- Typography ---- */
  --font-sans: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --text-page-title: 30px;
  --text-section-title: 20px;
  --text-body: 15px;
  --text-caption: 12.5px;
  --text-metric: 32px;

  /* ---- Spacing ---- */
  --space-xs: 8px;
  --space-sm: 12px;
  --space-md: 20px;
  --space-lg: 32px;
  --space-xl: 48px;

  /* ---- Motion ---- */
  --transition-fast: 150ms ease-out;
  --transition-normal: 220ms ease-out;

  /* ---- Z-index scale ---- */
  --z-base: 1;
  --z-navbar: 100;
  --z-dropdown: 200;
  --z-modal: 500;
  --z-toast: 600;

  /* ---- Layout ---- */
  --content-max-width: 1440px;
}