/* mlcrm design tokens - copied from mlcrm-design-system/project/tokens (do not edit here) */
/* ===========================================================================
   mlcrm · Webfonts
   SUBSTITUTION NOTE: these are Google Fonts stand-ins chosen to match the
   intended brand voice. Swap in licensed/self-hosted files when available.
     Display  → Bricolage Grotesque
     Body     → Plus Jakarta Sans
     Mono     → JetBrains Mono
   ========================================================================= */

@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,400..800&family=Plus+Jakarta+Sans:ital,wght@0,400..800;1,400..600&family=JetBrains+Mono:wght@400;500;600&display=swap');
/* ===========================================================================
   mlcrm · Colors
   Indigo→violet brand, warm-tinted neutrals, one coral accent for humanity.
   Base scales first, then semantic aliases. Light-first.
   ========================================================================= */

:root {
  /* --- Brand: indigo (primary) --------------------------------------- */
  --indigo-25:  #F6F6FE;
  --indigo-50:  #EEEEFC;
  --indigo-100: #E0E0FA;
  --indigo-200: #C6C6F6;
  --indigo-300: #A3A2F0;
  --indigo-400: #8281EA;
  --indigo-500: #6562E0;   /* hero */
  --indigo-600: #5048CB;   /* primary action */
  --indigo-700: #423AA8;
  --indigo-800: #383189;
  --indigo-900: #2C2769;
  --indigo-950: #1C1942;

  /* --- Brand: violet (gradient partner) ------------------------------ */
  --violet-25:  #FBF8FE;
  --violet-50:  #F5EEFE;
  --violet-100: #ECDFFD;
  --violet-200: #DBC2FB;
  --violet-300: #C39CF7;
  --violet-400: #A974F0;
  --violet-500: #9050E6;   /* gradient end */
  --violet-600: #7C39D4;
  --violet-700: #6829B0;
  --violet-800: #571F90;
  --violet-900: #481B74;

  /* --- Accent: coral (warm human highlight, used sparingly) ---------- */
  --coral-50:  #FFF1EE;
  --coral-100: #FFE0D9;
  --coral-200: #FFC4B8;
  --coral-300: #FF9C88;
  --coral-400: #FB7657;
  --coral-500: #F25B3A;   /* warm accent */
  --coral-600: #DC4422;
  --coral-700: #B6341A;

  /* --- Neutrals: warm gray (slight ochre tint, not cold) ------------- */
  --gray-0:   #FFFFFF;
  --gray-25:  #FCFCFB;
  --gray-50:  #F8F8F6;
  --gray-100: #F1F1EE;
  --gray-200: #E6E5E1;
  --gray-300: #D5D3CD;
  --gray-400: #ABA89F;
  --gray-500: #807D74;
  --gray-600: #5F5C54;
  --gray-700: #46443E;
  --gray-800: #2E2C28;
  --gray-900: #1C1B18;
  --gray-950: #121110;

  /* --- Semantic status ----------------------------------------------- */
  --green-50:  #E9F8F0;  --green-500: #16B364;  --green-600: #099250;  --green-700: #087443;
  --amber-50:  #FEF4E6;  --amber-500: #F79009;  --amber-600: #DC6803;  --amber-700: #B54708;
  --red-50:    #FEECEB;  --red-500:   #F04438;  --red-600:   #D92D20;  --red-700:   #B42318;
  --blue-50:   #EAF3FF;  --blue-500:  #2E90FA;  --blue-600:  #1570EF;  --blue-700:  #175CD3;

  /* --- Brand gradients (you asked for these) ------------------------- */
  --gradient-brand:   linear-gradient(120deg, #5048CB 0%, #7C39D4 52%, #9050E6 100%); /* @kind color */
  --gradient-brand-soft: linear-gradient(120deg, #6562E0 0%, #9050E6 100%); /* @kind color */
  --gradient-hero:    linear-gradient(135deg, #2C2769 0%, #5048CB 45%, #9050E6 100%); /* @kind color */
  --gradient-mesh:    radial-gradient(120% 120% at 0% 0%, #6562E0 0%, transparent 55%),
                      radial-gradient(120% 120% at 100% 0%, #9050E6 0%, transparent 50%),
                      radial-gradient(140% 140% at 50% 100%, #F25B3A 0%, transparent 45%); /* @kind color */
  --gradient-coral:   linear-gradient(120deg, #F25B3A 0%, #9050E6 100%); /* @kind color */
  --gradient-surface: linear-gradient(180deg, #FCFCFB 0%, #F1F1EE 100%); /* @kind color */

  /* ===================================================================
     SEMANTIC ALIASES — author UI against these, not the raw scales.
     =================================================================== */

  /* Surfaces */
  --surface-page:     var(--gray-25);
  --surface-card:     var(--gray-0);
  --surface-sunken:   var(--gray-50);
  --surface-raised:   var(--gray-0);
  --surface-inverse:  var(--gray-900);
  --surface-brand:    var(--indigo-600);
  --surface-brand-subtle: var(--indigo-50);
  --surface-accent-subtle: var(--coral-50);

  /* Text */
  --text-primary:    var(--gray-900);
  --text-secondary:  var(--gray-600);
  --text-tertiary:   var(--gray-500);
  --text-placeholder:var(--gray-400);
  --text-disabled:   var(--gray-400);
  --text-inverse:    var(--gray-0);
  --text-brand:      var(--indigo-600);
  --text-accent:     var(--coral-600);
  --text-link:       var(--indigo-600);

  /* Borders */
  --border-subtle:   var(--gray-200);
  --border-default:  var(--gray-300);
  --border-strong:   var(--gray-400);
  --border-brand:    var(--indigo-500);
  --border-focus:    var(--indigo-500);

  /* Interactive (primary) */
  --action-primary:        var(--indigo-600);
  --action-primary-hover:  var(--indigo-700);
  --action-primary-active: var(--indigo-800);
  --action-primary-text:   var(--gray-0);

  /* Interactive (secondary / neutral) */
  --action-neutral-bg:        var(--gray-0);
  --action-neutral-bg-hover:  var(--gray-50);
  --action-neutral-border:    var(--gray-300);
  --action-neutral-text:      var(--gray-800);

  /* Status surfaces + text */
  --status-success-bg: var(--green-50);  --status-success-fg: var(--green-700);
  --status-warning-bg: var(--amber-50);  --status-warning-fg: var(--amber-700);
  --status-error-bg:   var(--red-50);    --status-error-fg:   var(--red-700);
  --status-info-bg:    var(--blue-50);   --status-info-fg:    var(--blue-700);

  /* Focus ring */
  --ring-brand: 0 0 0 4px rgba(101, 98, 224, 0.30);
}
/* ===========================================================================
   mlcrm · Typography
   Display: Bricolage Grotesque (warm, characterful)
   Body:    Plus Jakarta Sans (friendly geometric)
   Mono:    JetBrains Mono (the data / IT backbone)
   ========================================================================= */

:root {
  /* Families */
  --font-display: 'Bricolage Grotesque', 'Plus Jakarta Sans', system-ui, sans-serif;
  --font-sans:    'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* Type scale (1rem = 16px) */
  --text-xs:   0.75rem;   /* 12 */
  --text-sm:   0.875rem;  /* 14 */
  --text-base: 1rem;      /* 16 */
  --text-lg:   1.125rem;  /* 18 */
  --text-xl:   1.25rem;   /* 20 */
  --text-2xl:  1.5rem;    /* 24 */
  --text-3xl:  1.875rem;  /* 30 */
  --text-4xl:  2.375rem;  /* 38 */
  --text-5xl:  3rem;      /* 48 */
  --text-6xl:  3.75rem;   /* 60 */
  --text-7xl:  4.75rem;   /* 76 */

  /* Weights */
  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;
  --weight-extrabold:800;

  /* Line heights */
  --leading-none:    1;
  --leading-tight:   1.15;
  --leading-snug:    1.3;
  --leading-normal:  1.5;
  --leading-relaxed: 1.65;

  /* Letter spacing */
  --tracking-tighter: -0.03em;
  --tracking-tight:   -0.015em;
  --tracking-normal:  0;
  --tracking-wide:    0.02em;
  --tracking-widest:  0.12em;  /* eyebrows / overlines */

  /* ---- Semantic role tokens ---- */
  --display-font:   var(--font-display);
  --display-weight: var(--weight-bold);
  --display-tracking: var(--tracking-tight);
  --display-leading:  var(--leading-tight);

  --heading-font:   var(--font-display);
  --heading-weight: var(--weight-semibold);

  --body-font:    var(--font-sans);
  --body-size:    var(--text-base);
  --body-leading: var(--leading-relaxed);

  --eyebrow-font:    var(--font-sans);
  --eyebrow-size:    var(--text-sm);
  --eyebrow-weight:  var(--weight-semibold);
  --eyebrow-tracking:var(--tracking-widest);

  --mono-font: var(--font-mono);
}
/* ===========================================================================
   mlcrm · Spacing & layout
   4px base grid.
   ========================================================================= */

:root {
  --space-0:   0;
  --space-1:   0.25rem;  /* 4  */
  --space-2:   0.5rem;   /* 8  */
  --space-3:   0.75rem;  /* 12 */
  --space-4:   1rem;     /* 16 */
  --space-5:   1.25rem;  /* 20 */
  --space-6:   1.5rem;   /* 24 */
  --space-8:   2rem;     /* 32 */
  --space-10:  2.5rem;   /* 40 */
  --space-12:  3rem;     /* 48 */
  --space-16:  4rem;     /* 64 */
  --space-20:  5rem;     /* 80 */
  --space-24:  6rem;     /* 96 */
  --space-32:  8rem;     /* 128 */

  /* Layout */
  --container-sm:  640px;
  --container-md:  768px;
  --container-lg:  1024px;
  --container-xl:  1200px;
  --container-2xl: 1320px;

  --gutter:        var(--space-6);
  --section-y:     var(--space-24);
}
/* ===========================================================================
   mlcrm · Radii, shadows, borders
   Soft, friendly. Layered shadows tinted slightly warm-neutral.
   ========================================================================= */

:root {
  /* Radii */
  --radius-xs:   4px;
  --radius-sm:   6px;
  --radius-md:   8px;
  --radius-lg:   10px;   /* default card */
  --radius-xl:   12px;
  --radius-2xl:  16px;
  --radius-3xl:  24px;
  --radius-full: 9999px;

  /* Border widths */
  --border-width: 1px;
  --border-width-thick: 1.5px;

  /* Shadows — soft, layered, low-contrast */
  --shadow-xs: 0 1px 2px rgba(28, 27, 24, 0.05);
  --shadow-sm: 0 1px 2px rgba(28, 27, 24, 0.06), 0 1px 3px rgba(28, 27, 24, 0.05);
  --shadow-md: 0 2px 4px -1px rgba(28, 27, 24, 0.06), 0 4px 8px -2px rgba(28, 27, 24, 0.08);
  --shadow-lg: 0 4px 6px -2px rgba(28, 27, 24, 0.05), 0 12px 20px -4px rgba(28, 27, 24, 0.10);
  --shadow-xl: 0 8px 10px -4px rgba(28, 27, 24, 0.06), 0 24px 40px -8px rgba(28, 27, 24, 0.14);

  /* Colored shadow for primary actions / brand cards */
  --shadow-brand: 0 6px 16px -4px rgba(80, 72, 203, 0.40);
  --shadow-brand-lg: 0 12px 32px -6px rgba(80, 72, 203, 0.38);

  /* Card preset */
  --card-radius: var(--radius-xl);
  --card-border: 1px solid var(--border-subtle);
  --card-shadow: var(--shadow-sm);

  /* Motion */
  --ease-out:   cubic-bezier(0.22, 1, 0.36, 1); /* @kind other */
  --ease-in-out:cubic-bezier(0.65, 0, 0.35, 1); /* @kind other */
  --duration-fast:   120ms; /* @kind other */
  --duration-normal: 200ms; /* @kind other */
  --duration-slow:   320ms; /* @kind other */
}