/* ==========================================================================
   iCloneU Dashboard — Design Tokens
   --------------------------------------------------------------------------
   Drop this into wwwroot/css/ and @import it first in your app.css. Override
   DevExpress theme variables to pull from these (see README → Theming).
   ========================================================================== */

:root {
  /* ---- Brand (iCloneU purple) ----------------------------------------- */
  --icu-brand:        #6F42C1;   /* primary accent, buttons, links */
  --icu-brand-ink:    #4E2D8F;   /* darker purple, hover/active */
  --icu-brand-50:     rgba(111, 66, 193, 0.06);   /* faint tint */
  --icu-brand-100:    rgba(111, 66, 193, 0.14);
  --icu-brand-200:    rgba(111, 66, 193, 0.28);

  /* Purple scale (for categorical chart series, tints, hover states) */
  --icu-purple-900:   #4E2D8F;
  --icu-purple-700:   #6F42C1;
  --icu-purple-600:   #8A5BD1;
  --icu-purple-500:   #A77EDE;
  --icu-purple-400:   #B798DF;
  --icu-purple-300:   #C7A9EA;
  --icu-purple-200:   #D4BCEF;
  --icu-purple-100:   #E0CCF3;
  --icu-purple-50:    #EDE1F7;
  --icu-purple-25:    #F3ECFA;

  /* ---- Neutrals ------------------------------------------------------- */
  --icu-bg:           #FAF9FB;   /* page background */
  --icu-surface:      #FFFFFF;   /* cards, panels */
  --icu-surface-alt:  #F6F4F8;   /* hover, muted blocks */
  --icu-line:         #E8E5EC;   /* borders, dividers */
  --icu-line-strong:  #D6D0DC;

  --icu-ink:          #1A1625;   /* primary text */
  --icu-ink-2:        #433B52;   /* secondary text */
  --icu-ink-3:        #6E6579;   /* muted / labels */
  --icu-ink-4:        #9892A1;   /* hint / placeholder */

  /* ---- Semantic ------------------------------------------------------- */
  --icu-ok:           #2F9E6B;
  --icu-ok-bg:        #EAF6EF;
  --icu-warn:         #C7893B;
  --icu-warn-bg:      #FBEFD9;
  --icu-bad:          #C84A3B;
  --icu-bad-bg:       #F8DBD6;
  --icu-info:         #3C6FD4;
  --icu-info-bg:      #E5EDFB;

  /* ---- Radius --------------------------------------------------------- */
  --icu-radius-xs:    4px;
  --icu-radius-sm:    6px;
  --icu-radius-md:    8px;
  --icu-radius-lg:    10px;
  --icu-radius-xl:    12px;
  --icu-radius-pill:  999px;

  /* ---- Shadow --------------------------------------------------------- */
  --icu-shadow-sm:    0 1px 2px rgba(26, 22, 37, 0.04);
  --icu-shadow-md:    0 4px 12px rgba(26, 22, 37, 0.06);
  --icu-shadow-lg:    0 12px 32px rgba(26, 22, 37, 0.10);

  /* ---- Typography ----------------------------------------------------- */
  --icu-font-sans:    'Inter Tight', 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --icu-font-mono:    'JetBrains Mono', 'SF Mono', 'Monaco', Consolas, monospace;

  /* Scale — rem-based; 1rem = 16px. Use these values in components. */
  --icu-fs-xs:        11px;   /* mono labels, meta */
  --icu-fs-sm:        12px;   /* card sublabels, chips */
  --icu-fs-base:      13.5px; /* body, row text */
  --icu-fs-md:        15px;   /* card titles */
  --icu-fs-lg:        18px;   /* section headers */
  --icu-fs-xl:        22px;   /* hero greet */
  --icu-fs-2xl:       30px;   /* gauge numerals */
  --icu-fs-3xl:       34px;   /* KPI numerals */

  --icu-fw-regular:   400;
  --icu-fw-medium:    500;
  --icu-fw-semibold:  600;
  --icu-fw-bold:      700;
  --icu-fw-light:     300;    /* used for big numerals (KPI, gauge) */

  /* ---- Spacing (4-based) --------------------------------------------- */
  --icu-sp-1:  4px;
  --icu-sp-2:  8px;
  --icu-sp-3:  12px;
  --icu-sp-4:  16px;
  --icu-sp-5:  20px;
  --icu-sp-6:  24px;
  --icu-sp-8:  32px;
  --icu-sp-10: 40px;

  /* ---- Row selection (grids, list items, kanban cards, tree nodes) ---
     Design: tinted brand background + 3px brand left rail. Keeps badges
     and chips readable because the row stays a light surface. */
  --icu-row-selected-bg:     #F6F2FC;   /* brand / 6% — opaque so it sits
                                           above the white surface without
                                           double-tinting on stripes */
  --icu-row-selected-hover:  #EFE8F8;   /* brand / ~12% — hover on selected */
  --icu-row-selected-rail:   var(--icu-brand);   /* 3px inset, first cell */
  --icu-row-selected-ink:    var(--icu-brand-ink); /* title only */
  --icu-row-hover-bg:        #FAFAFD;   /* hover on non-selected row */

  /* ---- Layout --------------------------------------------------------- */
  --icu-sidebar-w:     232px;
  --icu-topbar-h:      56px;
  --icu-content-pad:   24px;
  --icu-content-max:   1440px;

  /* ---- Chart series (use consistently in DxChart / DxPieChart) ------- */
  --icu-chart-1: #4E2D8F;
  --icu-chart-2: #6F42C1;
  --icu-chart-3: #8A5BD1;
  --icu-chart-4: #A77EDE;
  --icu-chart-5: #B798DF;
  --icu-chart-6: #C7A9EA;
  --icu-chart-7: #D4BCEF;
  --icu-chart-8: #E0CCF3;
  --icu-chart-9: #EDE1F7;
  --icu-chart-10: #F3ECFA;

  /* Platform colors (use ONLY for "contacts by platform" chart, never
     elsewhere — keeps the palette cohesive). */
  --icu-platform-instagram: #E1306C;
  --icu-platform-webchat:   #4F2E8F;
  --icu-platform-whatsapp:  #25D366;
  --icu-platform-facebook:  #1877F2;
  --icu-platform-telegram:  #26A5E4;
  --icu-platform-youtube:   #B798DF; /* tinted to stay in-family */
  --icu-platform-other:     #ECEAF0;
}