/* ============================================================================
   Back Office — vitalfew Design System
   Foundation tokens: color, typography, spacing, elevation, motion.
   These power the Tailwind theme (see tailwind.config.js) — every Tailwind
   color/radius/shadow token resolves to one of the CSS variables below, so
   re-theming (or the live Tweaks panel) only has to touch this file.
   Font: Inter (self-hosted variable fonts in ../fonts).
============================================================================ */

/* ---- Inter (self-hosted variable fonts) ---------------------------------- */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/Inter-VariableFont_opsz_wght.ttf") format("truetype");
}
@font-face {
  font-family: "Inter";
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/Inter-Italic-VariableFont_opsz_wght.ttf") format("truetype");
}

:root {
  /* ---- Type family ------------------------------------------------------- */
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* ---- Brand ------------------------------------------------------------- */
  --vf-violet:   #6d1fff;
  --vf-blue:     #4b70ec;
  --vf-teal:     #24cdd7;
  --vf-mint:     #0fffcb;
  --vf-magenta:  #a636e4;
  --vf-cyan:     #24cdd7;
  --grad-brand:  linear-gradient(120deg, #6d1fff 0%, #4b70ec 42%, #24cdd7 78%, #0fffcb 100%);
  --grad-brand-magenta: linear-gradient(135deg, #5500c4 0%, #a636e4 55%, #ea63ff 100%);

  /* ---- Primary (indigo / violet) ----------------------------------------- */
  --primary-50:  #eef2ff;
  --primary-100: #e0e7ff;
  --primary-200: #c7d2fe;
  --primary-300: #a5b4fc;
  --primary-400: #818cf8;
  --primary-500: #6366f1;
  --primary-600: #4f46e5;   /* main brand action — tweakable */
  --primary-700: #4338ca;   /* tweakable */
  --primary-800: #3730a3;
  --primary-900: #312e81;
  --grad-primary:      linear-gradient(135deg, #6d28d9 0%, #4f46e5 100%);
  --grad-primary-band: linear-gradient(135deg, #6d28d9 0%, #2540e8 100%);

  /* ---- Ink / Navy -------------------------------------------------------- */
  --navy-900: #011235;
  --navy-800: #172554;
  --ink-900:  #1e2430;
  --btn-dark: #3f3f46;

  /* ---- Text -------------------------------------------------------------- */
  --fg-1: #3f3f46;
  --fg-2: #475569;
  --fg-3: #64748b;
  --fg-4: #94a3b8;
  --fg-on-dark:      #ffffff;
  --fg-on-dark-soft: #c7d0e8;

  /* ---- Surfaces ---------------------------------------------------------- */
  --bg-page:     #f6f7fe;
  --bg-card:     #ffffff;
  --bg-subtle:   #f8fafc;
  --bg-indigo:   #eef2ff;
  --bg-indigo-2: #e8edff;
  --border:      #e2e8f0;
  --border-soft: #eef0f5;
  --border-strong:#cbd5e1;

  /* ---- Semantic ---------------------------------------------------------- */
  --success:        #16a34a;
  --success-bg:     #f0fdf4;
  --success-border: #bbf7d0;
  --error:          #dc2626;
  --error-bg:       #fef2f2;
  --error-border:   #fecaca;
  --warning:        #d97706;
  --warning-bg:     #fffbeb;
  --warning-border: #fde68a;
  --accent-orange:  #f97316;

  /* ---- Module / icon-tile tints ------------------------------------------ */
  --tile-violet-bg: #f3e8ff; --tile-violet-fg: #9333ea;
  --tile-blue-bg:   #dbeafe; --tile-blue-fg:   #2563eb;
  --tile-green-bg:  #dcfce7; --tile-green-fg:  #16a34a;
  --tile-orange-bg: #ffedd5; --tile-orange-fg: #ea580c;
  --tile-indigo-bg: #ede9fe; --tile-indigo-fg: #6d28d9;

  /* ---- Radius ------------------------------------------------------------ */
  --r-sm:   8px;
  --r-md:   10px;   /* buttons, inputs — tweakable */
  --r-lg:   16px;   /* cards */
  --r-xl:   20px;
  --r-pill: 999px;

  /* ---- Elevation --------------------------------------------------------- */
  --shadow-xs: 0 1px 2px rgba(16,24,40,.06);
  --shadow-sm: 0 1px 3px rgba(16,24,40,.07), 0 1px 2px rgba(16,24,40,.04);
  --shadow-md: 0 4px 12px rgba(16,24,40,.07), 0 2px 4px rgba(16,24,40,.04);
  --shadow-lg: 0 10px 28px rgba(16,24,40,.09), 0 4px 10px rgba(16,24,40,.05);
  --shadow-brand: 0 12px 32px rgba(79,70,229,.22);
  --shadow-card: 0 1px 3px rgba(16,24,40,.06), 0 10px 28px rgba(16,24,40,.06);

  /* ---- Type scale (font shorthand: weight size/line family) -------------- */
  --display: 700 48px/1.08 var(--font-sans);
  --h1:      700 40px/1.12 var(--font-sans);
  --h2:      700 34px/1.15 var(--font-sans);
  --h3:      700 24px/1.25 var(--font-sans);
  --h4:      600 19px/1.3  var(--font-sans);
  --h5:      600 16px/1.4  var(--font-sans);
  --body-lg: 400 18px/1.6  var(--font-sans);
  --body:    400 16px/1.6  var(--font-sans);
  --body-sm: 400 14px/1.55 var(--font-sans);
  --label:   600 14px/1.3  var(--font-sans);
  --caption: 500 13px/1.4  var(--font-sans);
  --overline:600 12px/1.3  var(--font-sans);

  /* ---- Motion ------------------------------------------------------------ */
  --ease: cubic-bezier(.4, 0, .2, 1);
  --dur:  160ms;
}