/* =====================================================================
   NIVO CRM — Colors & Type
   Source: nivo-crm-v2 / src/index.css + Layout.jsx + reportStyles
   Fonts: DM Sans (primary, UI), Inter (secondary, fallback)
   ===================================================================== */

/* --- Webfont imports ---------------------------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700;1,9..40,400&family=Inter:wght@300;400;500;600&display=swap');

:root {
  /* =====================================================================
     BRAND BLUES — primary palette
     "Frosted Blue" — navy → mid-blue, used for brand, primary action,
     active nav states, headlines.
     ===================================================================== */
  --blue-900: #0f2544;   /* deepest navy — hero gradients */
  --blue-800: #1e3a5f;   /* nav backdrops, support-mode banner */
  --blue-700: #2e5080;   /* hover on primary */
  --blue-600: #2e6da4;   /* PRIMARY action — buttons, links */
  --blue-500: #3b82c4;   /* focus ring base */
  --blue-400: #60a5d8;   /* secondary accents */
  --blue-300: #93c5e8;
  --blue-100: #dbeafe;   /* tinted pill / active nav icon bg */
  --blue-50:  #eff6ff;   /* subtle wash */

  /* Two close-by brand blues used in the logo gradient + active-state badges */
  --brand-azure: #3182ce;
  --brand-deep:  #2b6cb0;

  /* =====================================================================
     SEMANTIC — success / warning / danger / info / purple / teal
     ===================================================================== */
  --green-700: #15803d;
  --green-600: #16a34a;
  --green-100: #dcfce7;
  --green-50:  #f0fdf4;

  --amber-700: #a16207;
  --amber-600: #d97706;
  --amber-500: #f59e0b;
  --amber-100: #fef3c7;
  --amber-50:  #fffbeb;

  --red-700:   #b91c1c;
  --red-600:   #dc2626;
  --red-500:   #ef4444;
  --red-100:   #fee2e2;
  --red-50:    #fef2f2;

  --purple-700: #6d28d9;
  --purple-100: #ede9fe;

  --teal-600:  #0d9488;
  --teal-100:  #ccfbf1;

  /* =====================================================================
     NEUTRAL — Tailwind-aligned grayscale.
     The app's text/border/bg system rides almost entirely on these.
     ===================================================================== */
  --gray-900:  #0d1b2e;   /* primary text + headings (slightly cooler than slate-900) */
  --gray-800:  #1f2937;
  --gray-700:  #374151;
  --gray-600:  #4b5563;   /* body text */
  --gray-500:  #6b7280;   /* secondary text, helper */
  --gray-400:  #8899aa;   /* muted labels, placeholders-strong */
  --gray-300:  #c8d8f0;   /* sidebar scrollbar — slightly blue-tinted */
  --gray-250:  #d0dcf0;   /* sidebar borders — slightly blue-tinted */
  --gray-200:  #e5e7eb;   /* default borders */
  --gray-150:  #e8edf5;   /* topbar border */
  --gray-100:  #f3f4f6;   /* hover surfaces */
  --gray-50:   #f7f9fc;   /* app background */
  --white:     #ffffff;

  /* Placeholder color used by every input in the app */
  --placeholder: #c0cad6;

  /* =====================================================================
     SEMANTIC ROLES — use these in components.
     ===================================================================== */
  --bg-app:        var(--gray-50);
  --bg-surface:    var(--white);
  --bg-elevated:   #fafbfc;          /* hovered KPI / row */
  --bg-sidebar:    linear-gradient(160deg, #f0f5ff 0%, #e8f0fe 100%);
  --bg-brand:      linear-gradient(135deg, var(--brand-azure) 0%, var(--brand-deep) 100%);
  --bg-brand-deep: linear-gradient(135deg, var(--blue-900) 0%, var(--blue-700) 60%, var(--blue-600) 100%);

  --fg-strong:     var(--gray-900);
  --fg:            var(--gray-700);
  --fg-muted:      var(--gray-500);
  --fg-subtle:     var(--gray-400);
  --fg-on-brand:   #ffffff;

  --border:        var(--gray-200);
  --border-soft:   var(--gray-150);
  --border-brand:  var(--gray-250);

  --action-primary:        var(--blue-600);
  --action-primary-hover:  var(--blue-700);
  --action-danger:         var(--red-600);
  --action-success:        var(--green-600);

  /* Role pill palette — exact pairs lifted from Layout.jsx */
  --role-admin-bg:  #dbeafe; --role-admin-fg:  #1d4ed8;
  --role-mgr-bg:    #dcfce7; --role-mgr-fg:    #15803d;
  --role-user-bg:   #f1f5f9; --role-user-fg:   #475569;
  --role-super-bg:  #ede9fe; --role-super-fg:  #6d28d9;
  --role-psm-bg:    #ffedd5; --role-psm-fg:    #c2410c;
  --role-pse-bg:    #fef9c3; --role-pse-fg:    #a16207;

  /* =====================================================================
     TYPOGRAPHY
     Body uses DM Sans; the Layout.jsx sidebar uses Inter as fallback for
     finer UI weight. We keep DM Sans as the canonical brand font.
     ===================================================================== */
  --font-sans: 'DM Sans', 'Inter', system-ui, -apple-system, sans-serif;
  --font-ui:   'Inter', 'DM Sans', system-ui, sans-serif;       /* tighter UI chrome */
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* Base size in app is 14px — type scale is compact, not editorial. */
  --fs-xs:   11px;   /* role pills, copyright */
  --fs-sm:   12px;   /* helper, table secondary */
  --fs-base: 13px;   /* nav, dense rows */
  --fs-md:   14px;   /* body */
  --fs-lg:   15px;   /* card titles */
  --fs-xl:   17px;   /* modal titles */
  --fs-2xl:  22px;   /* page H1 */
  --fs-3xl:  26px;   /* login welcome */
  --fs-4xl:  40px;   /* marketing hero (login left panel only) */

  --lh-tight:  1.15;
  --lh-snug:   1.35;
  --lh-base:   1.5;
  --lh-loose:  1.65;

  --fw-regular: 400;
  --fw-medium:  500;
  --fw-semi:    600;
  --fw-bold:    700;

  --tracking-tight: -0.5px;   /* hero + brand wordmark */
  --tracking-snug:  -0.3px;   /* card titles */
  --tracking-wide:  0.5px;    /* "CRM" suffix on wordmark */

  /* =====================================================================
     RADII / SHADOWS / SPACING
     ===================================================================== */
  --radius-xs:  6px;
  --radius-sm:  8px;
  --radius:     10px;     /* default — buttons, inputs */
  --radius-md:  12px;
  --radius-lg:  16px;     /* cards, modals */
  --radius-xl:  20px;
  --radius-2xl: 24px;
  --radius-pill: 100px;

  --shadow-sm:  0 1px 3px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.05);
  --shadow:     0 4px 12px rgba(0,0,0,0.08), 0 2px 4px rgba(0,0,0,0.05);
  --shadow-lg:  0 10px 30px rgba(0,0,0,0.10), 0 4px 10px rgba(0,0,0,0.06);
  --shadow-xl:  0 20px 60px rgba(0,0,0,0.14);
  --shadow-brand: 0 2px 8px rgba(49,130,206,0.35);
  --shadow-brand-soft: 0 1px 4px rgba(49,130,206,0.12);
  --focus-ring: 0 0 0 3px rgba(49,130,206,0.12);

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 10px;
  --space-4: 12px;
  --space-5: 14px;
  --space-6: 16px;
  --space-7: 20px;
  --space-8: 24px;
  --space-10: 32px;
  --space-12: 48px;

  --sidebar-w: 224px;
}

/* =====================================================================
   ELEMENT DEFAULTS — semantic, opinionated
   ===================================================================== */
html, body { font-family: var(--font-sans); font-size: var(--fs-md); color: var(--fg-strong); background: var(--bg-app); -webkit-font-smoothing: antialiased; }

h1, .h1 { font-size: var(--fs-2xl); font-weight: var(--fw-bold); line-height: var(--lh-tight); letter-spacing: var(--tracking-snug); color: var(--fg-strong); }
h2, .h2 { font-size: var(--fs-xl);  font-weight: var(--fw-bold); line-height: var(--lh-snug);  color: var(--fg-strong); }
h3, .h3 { font-size: var(--fs-lg);  font-weight: var(--fw-semi); line-height: var(--lh-snug);  color: var(--fg-strong); }
h4, .h4 { font-size: var(--fs-md);  font-weight: var(--fw-semi); color: var(--fg-strong); }

p, .body { font-size: var(--fs-md); line-height: var(--lh-base); color: var(--fg); }
.small, small { font-size: var(--fs-sm); color: var(--fg-muted); }
.tiny  { font-size: var(--fs-xs); color: var(--fg-subtle); }

.kpi-value { font-size: var(--fs-2xl); font-weight: var(--fw-bold); letter-spacing: var(--tracking-snug); color: var(--fg-strong); }
.kpi-label { font-size: var(--fs-sm);  font-weight: var(--fw-medium); color: var(--fg-muted); text-transform: none; }

code, .mono { font-family: var(--font-mono); font-size: 12px; background: var(--gray-100); padding: 1px 6px; border-radius: var(--radius-xs); }

.eyebrow { font-size: 10.5px; color: var(--fg-subtle); }

::placeholder { color: var(--placeholder); opacity: 1; }

/* =====================================================================
   AISYNERGY MARKETING EXTENSION
   WhatsApp brand greens (product domain) + marketing-scale type.
   Justified additions: the product's medium is WhatsApp, so these greens
   pair with the NIVO blue base. Marketing type runs larger than the
   compact in-app scale.
   ===================================================================== */
:root {
  --wa-green:   #25d366;   /* WhatsApp signature green — CTAs / accents */
  --wa-green-d: #1ebe5d;   /* hover */
  --wa-teal:    #075e54;   /* WhatsApp deep teal — dark surfaces */
  --wa-teal-2:  #128c7e;   /* mid teal */
  --wa-bubble:  #dcf8c6;   /* outgoing chat bubble */
  --wa-bg:      #e5ddd5;   /* chat canvas */

  /* Marketing type scale (larger than the in-app --fs-* set) */
  --mk-hero:    clamp(40px, 6.4vw, 76px);
  --mk-h2:      clamp(30px, 3.6vw, 46px);
  --mk-h3:      clamp(20px, 1.7vw, 26px);
  --mk-lead:    clamp(17px, 1.3vw, 20px);
  --mk-stat:    clamp(40px, 5vw, 68px);
}