/* ==========================================================================
   Ochat Design System — Colors & Type
   Dashboard de métricas / KPIs / alertas para Chatwoot (CRM)
   ========================================================================== */

/* ---- Google Font: Inter (UI) + JetBrains Mono (code/numbers) ------------- */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root {
  /* =======================================================================
     BRAND — directly from logo.svg
     ======================================================================= */
  --brand-indigo:        #29265B;  /* gradient stop 0 */
  --brand-magenta:       #941C80;  /* gradient stop 1 */
  --brand-gradient:      linear-gradient(135deg, #29265B 0%, #941C80 100%);
  --brand-gradient-soft: linear-gradient(135deg, #29265B 0%, #6B2078 55%, #941C80 100%);

  /* =======================================================================
     PRIMARY — purple scale (derived from brand-magenta, hue ≈ 310)
     Use --primary-600 as the default interactive color.
     ======================================================================= */
  --primary-50:  #FAF4FA;
  --primary-100: #F3E6F2;
  --primary-200: #E3C6E1;
  --primary-300: #CC9CC8;
  --primary-400: #B16AAB;
  --primary-500: #9A3F90;
  --primary-600: #7D2574;   /* default */
  --primary-700: #611C5B;
  --primary-800: #461746;
  --primary-900: #2E1334;

  /* Accent / indigo scale (cooler counterpart, from --brand-indigo) */
  --indigo-50:  #F2F2F7;
  --indigo-100: #E1E1EC;
  --indigo-200: #BEBDD2;
  --indigo-300: #8E8CB1;
  --indigo-400: #5D5B8E;
  --indigo-500: #3C3874;
  --indigo-600: #29265B;   /* brand */
  --indigo-700: #1F1D48;
  --indigo-800: #151432;
  --indigo-900: #0B0A1E;

  /* =======================================================================
     NEUTRALS — slate-leaning grays (cool, pairs with purple)
     ======================================================================= */
  --gray-0:   #FFFFFF;
  --gray-25:  #FCFCFD;
  --gray-50:  #F7F8FA;
  --gray-100: #F1F2F6;
  --gray-200: #E5E7EE;
  --gray-300: #D2D5DF;
  --gray-400: #A7ACBC;
  --gray-500: #7A8097;
  --gray-600: #545A71;
  --gray-700: #3C4258;
  --gray-800: #262B3D;
  --gray-900: #151827;
  --gray-950: #0B0D17;

  /* =======================================================================
     SEMANTIC — status colors (alerts, metrics, trends)
     ======================================================================= */
  --success-50:  #ECFDF3;
  --success-100: #D1FADF;
  --success-500: #12B76A;
  --success-600: #0E9355;
  --success-700: #0A7142;

  --warning-50:  #FFFAEB;
  --warning-100: #FEF0C7;
  --warning-500: #F79009;
  --warning-600: #DC6803;
  --warning-700: #B54708;

  --danger-50:   #FEF3F2;
  --danger-100:  #FEE4E2;
  --danger-500:  #F04438;
  --danger-600:  #D92D20;
  --danger-700:  #B42318;

  --info-50:     #EFF8FF;
  --info-100:    #D1E9FF;
  --info-500:    #2E90FA;
  --info-600:    #1570EF;
  --info-700:    #175CD3;

  /* =======================================================================
     CHART palette — 8 categorical colors, anchored on brand
     Use in order for series 1..8.
     ======================================================================= */
  --chart-1: #7D2574;  /* primary purple */
  --chart-2: #29265B;  /* indigo */
  --chart-3: #2E90FA;  /* info blue */
  --chart-4: #12B76A;  /* success green */
  --chart-5: #F79009;  /* warning amber */
  --chart-6: #F04438;  /* danger red */
  --chart-7: #B16AAB;  /* pale purple */
  --chart-8: #545A71;  /* slate */

  /* =======================================================================
     SEMANTIC SURFACES — fg / bg / border
     ======================================================================= */
  --bg-app:         var(--gray-50);
  --bg-surface:     var(--gray-0);
  --bg-surface-2:   var(--gray-50);
  --bg-hover:       var(--gray-100);
  --bg-pressed:     var(--gray-200);
  --bg-inverse:     var(--gray-900);
  --bg-brand:       var(--brand-gradient);
  --bg-brand-soft:  var(--primary-50);

  --fg-1:           var(--gray-900);   /* primary text */
  --fg-2:           var(--gray-700);   /* body text */
  --fg-3:           var(--gray-500);   /* muted / secondary */
  --fg-4:           var(--gray-400);   /* disabled / placeholder */
  --fg-on-brand:    var(--gray-0);
  --fg-link:        var(--primary-600);
  --fg-link-hover:  var(--primary-700);

  --border-subtle:  var(--gray-200);
  --border-default: var(--gray-300);
  --border-strong:  var(--gray-400);
  --border-brand:   var(--primary-600);
  --border-focus:   var(--primary-500);

  /* =======================================================================
     ELEVATION — shadows (soft, never heavy)
     ======================================================================= */
  --shadow-xs:  0 1px 2px 0 rgba(21, 24, 39, 0.04);
  --shadow-sm:  0 1px 3px 0 rgba(21, 24, 39, 0.06), 0 1px 2px -1px rgba(21, 24, 39, 0.04);
  --shadow-md:  0 4px 8px -2px rgba(21, 24, 39, 0.08), 0 2px 4px -2px rgba(21, 24, 39, 0.04);
  --shadow-lg:  0 12px 20px -4px rgba(21, 24, 39, 0.10), 0 4px 8px -4px rgba(21, 24, 39, 0.04);
  --shadow-xl:  0 20px 32px -8px rgba(21, 24, 39, 0.14), 0 8px 12px -4px rgba(21, 24, 39, 0.04);
  --shadow-brand: 0 8px 24px -6px rgba(125, 37, 116, 0.28);
  --shadow-focus: 0 0 0 4px rgba(125, 37, 116, 0.16);

  /* =======================================================================
     RADIUS
     ======================================================================= */
  --radius-xs:  4px;
  --radius-sm:  6px;
  --radius-md:  8px;   /* default: buttons, inputs */
  --radius-lg:  12px;  /* cards */
  --radius-xl:  16px;  /* modals, large cards */
  --radius-2xl: 20px;
  --radius-full: 9999px;

  /* =======================================================================
     SPACING — 4px grid
     ======================================================================= */
  --space-0:   0;
  --space-1:   4px;
  --space-2:   8px;
  --space-3:   12px;
  --space-4:   16px;
  --space-5:   20px;
  --space-6:   24px;
  --space-8:   32px;
  --space-10:  40px;
  --space-12:  48px;
  --space-16:  64px;
  --space-20:  80px;

  /* =======================================================================
     TYPOGRAPHY — Inter (UI), JetBrains Mono (numbers/code)
     ======================================================================= */
  --font-sans: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --font-display: 'Inter', ui-sans-serif, system-ui, sans-serif;

  --fw-regular:   400;
  --fw-medium:    500;
  --fw-semibold:  600;
  --fw-bold:      700;
  --fw-extrabold: 800;

  /* Fluid type scale (dashboard density — compact but readable) */
  --fs-display: 40px;  --lh-display: 48px;
  --fs-h1:      28px;  --lh-h1:      36px;
  --fs-h2:      22px;  --lh-h2:      30px;
  --fs-h3:      18px;  --lh-h3:      26px;
  --fs-h4:      16px;  --lh-h4:      24px;

  --fs-body:    14px;  --lh-body:    22px;
  --fs-body-lg: 16px;  --lh-body-lg: 24px;
  --fs-sm:      13px;  --lh-sm:      20px;
  --fs-xs:      12px;  --lh-xs:      18px;

  --fs-kpi:     32px;  --lh-kpi:     40px;   /* KPI big numbers */
  --fs-kpi-lg:  44px;  --lh-kpi-lg:  52px;

  --tracking-tight:  -0.02em;
  --tracking-normal: 0;
  --tracking-wide:   0.04em;
  --tracking-caps:   0.08em;

  /* =======================================================================
     MOTION
     ======================================================================= */
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out:      cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in:       cubic-bezier(0.4, 0, 1, 1);
  --dur-fast:   120ms;
  --dur-base:   180ms;
  --dur-slow:   280ms;

  /* =======================================================================
     Z-INDEX
     ======================================================================= */
  --z-dropdown: 1000;
  --z-sticky:   1020;
  --z-overlay:  1040;
  --z-modal:    1050;
  --z-toast:    1080;
}

/* ==========================================================================
   SEMANTIC TYPE CLASSES
   ========================================================================== */
.t-display  { font-family: var(--font-display); font-size: var(--fs-display); line-height: var(--lh-display); font-weight: var(--fw-extrabold); letter-spacing: var(--tracking-tight); color: var(--fg-1); }
.t-h1       { font-family: var(--font-display); font-size: var(--fs-h1);      line-height: var(--lh-h1);      font-weight: var(--fw-bold);      letter-spacing: var(--tracking-tight); color: var(--fg-1); }
.t-h2       { font-family: var(--font-display); font-size: var(--fs-h2);      line-height: var(--lh-h2);      font-weight: var(--fw-semibold);  letter-spacing: var(--tracking-tight); color: var(--fg-1); }
.t-h3       { font-family: var(--font-sans);    font-size: var(--fs-h3);      line-height: var(--lh-h3);      font-weight: var(--fw-semibold);  color: var(--fg-1); }
.t-h4       { font-family: var(--font-sans);    font-size: var(--fs-h4);      line-height: var(--lh-h4);      font-weight: var(--fw-semibold);  color: var(--fg-1); }

.t-body-lg  { font-family: var(--font-sans); font-size: var(--fs-body-lg); line-height: var(--lh-body-lg); color: var(--fg-2); }
.t-body     { font-family: var(--font-sans); font-size: var(--fs-body);    line-height: var(--lh-body);    color: var(--fg-2); }
.t-sm       { font-family: var(--font-sans); font-size: var(--fs-sm);      line-height: var(--lh-sm);      color: var(--fg-2); }
.t-xs       { font-family: var(--font-sans); font-size: var(--fs-xs);      line-height: var(--lh-xs);      color: var(--fg-3); }

.t-kpi      { font-family: var(--font-display); font-size: var(--fs-kpi);    line-height: var(--lh-kpi);    font-weight: var(--fw-bold); letter-spacing: var(--tracking-tight); color: var(--fg-1); font-variant-numeric: tabular-nums; }
.t-kpi-lg   { font-family: var(--font-display); font-size: var(--fs-kpi-lg); line-height: var(--lh-kpi-lg); font-weight: var(--fw-extrabold); letter-spacing: var(--tracking-tight); color: var(--fg-1); font-variant-numeric: tabular-nums; }

.t-eyebrow  { font-family: var(--font-sans); font-size: var(--fs-xs); line-height: var(--lh-xs); font-weight: var(--fw-semibold); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--fg-3); }
.t-label    { font-family: var(--font-sans); font-size: var(--fs-sm); line-height: var(--lh-sm); font-weight: var(--fw-medium); color: var(--fg-2); }
.t-mono     { font-family: var(--font-mono); font-size: var(--fs-sm); line-height: var(--lh-sm); color: var(--fg-2); font-variant-numeric: tabular-nums; }
.t-num      { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1, "cv11" 1; }

.t-brand-gradient {
  background: var(--brand-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ==========================================================================
   SANE DEFAULTS
   ========================================================================== */
html, body {
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--fg-1);
  background: var(--bg-app);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}