/* SPARK 2.0 design tokens (dark) — sourced from spark-ui-v2-updated-version/src/index.css
   Custom CSS only. Do not introduce Tailwind. */

:root {
  /* ========== TEXT ========== */
  --text-heading: #fafafa;
  --text-body: #a3a3a3;
  --text-secondary: #a3a3a3;
  --text-placeholder: #737373;
  --text-disable: #737373;
  --text-on-color: #fafafa;
  --text-brand-default: #7962d5;
  --text-brand-secondary: #e3d4ff;
  --text-success: #22c55e;
  --text-error: #ef4444;
  --text-warning: #eab308;

  /* ========== BACKGROUND ========== */
  --bg-base: #161818;
  --bg-elevation-1: #1c1c1c;
  --bg-elevation-2: #212121;
  --bg-base-hover: #262626;
  --bg-disable: #212121;
  --bg-brand: #7962d5;
  --bg-brand-hover: #9278e8;
  --bg-brand-secondary: #392c5d;
  --bg-mask: rgba(11, 10, 10, 0.7);
  --bg-error-base: #561716;
  --success-bg: #052e16;

  /* ========== BORDER ========== */
  --border-primary: #212121;
  --border-secondary: #404040;
  --border-tertiary: #525252;
  --border-brand-default: #7962d5;
  --border-error: #ef4444;
  --border-width: 1px;

  /* ========== SCROLLBAR ========== */
  --scrollbar-size: 10px;
  --scrollbar-track: #1a1a1a;
  --scrollbar-thumb: #404040;
  --scrollbar-thumb-hover: #525252;
  --scrollbar-thumb-active: #7962d5;
  --scrollbar-corner: #1a1a1a;

  /* ========== ICON ========== */
  --icon-primary: #e5e5e5;
  --icon-secondary: #a3a3a3;
  --icon-disable: #737373;
  --icon-brand: #7962d5;
  --icon-error: #ef4444;
  --icon-on-color: #f3eeff;

  /* ========== BUTTON ========== */
  --button-bg-default: #6240bb;
  --button-hover: #7962d5;
  --button-pressed: #371e70;
  --button-disable: #212121;
  --button-secondary-border: #7962d5;
  --button-danger-default: #ef4444;
  --button-danger-hover: #dc2626;
  --button-danger-pressed: #991b1b;
  --button-radius: 8px;
  --button-gap: 8px;
  --button-height-sm: 32px;
  --button-height-regular: 36px;
  --button-height-md: 40px;
  --button-pad-y-sm: 8px;
  --button-pad-x-sm: 12px;
  --button-pad-y-regular: 8px;
  --button-pad-x-regular: 12px;
  --button-font-size-sm: 12px;
  --button-font-size-regular: 14px;
  --icon-button-size-sm: 32px;
  --icon-button-icon-sm: 16px;
  --icon-button-radius: 8px;

  /* ========== CHIP (CustomTag) ========== */
  --chip-height: 22px;
  --chip-pad-y: 3px;
  --chip-pad-x: 8px;
  --chip-radius: 4px;
  --chip-font-size: 12px;
  --chip-label: #fafafa;
  --chip-green-bg: #052e16;
  --chip-green-border: #16a34a;
  --chip-red-bg: #561716;
  --chip-red-border: #ef4444;
  --chip-orange-bg: #431407;
  --chip-orange-border: #f97316;
  --chip-yellow-bg: #422006;
  --chip-yellow-border: #eab308;
  --chip-generic-bg: #171717;
  --chip-generic-border: #525252;
  --chip-blue-bg: #172554;
  --chip-blue-border: #3b82f6;
  --chip-brand-bg: #220f4a;
  --chip-brand-border: #7962d5;

  /* ========== TABLE ========== */
  --table-head-bg: #1c1c1c;
  --table-body-bg: #161818;
  --table-border: #212121;
  --table-row-border: #212121;
  --table-header-height: 40px;
  --table-row-height: 48px;
  --table-cell-pad-x: 12px;
  --table-header-font-size: 12px;
  --table-body-font-size: 14px;
  --table-radius: 8px;

  /* ========== TEXTFIELD ========== */
  --textfield-gap: 4px;
  --textfield-radius: 8px;
  --textfield-label-font-size: 13px;
  --textfield-value-font-size: 14px;
  --textfield-helper-font-size: 12px;
  --textfield-height-regular: 36px;
  --textfield-pad-x-regular: 12px;
  --textfield-pad-y-regular: 7.5px;

  /* ========== SEGMENTED ========== */
  --segmented-height: 32px;
  --segmented-radius: 10px;
  --segmented-font-size: 14px;
  --segmented-border: var(--border-secondary);
  --segmented-bg-active: var(--bg-brand-secondary);
  --segmented-label-active: var(--text-on-color);
  --segmented-bg-inactive: #000000;
  --segmented-label-inactive: var(--text-body);

  /* ========== MODAL / DRAWER ========== */
  --modal-radius: 8px;
  --modal-pad-x: 24px;
  --modal-pad-y: 24px;
  --modal-title-size: 18px;
  --modal-desc-size: 13px;
  --modal-close-size: 20px;
  --modal-header-bg: #1c1c1c;
  --modal-body-bg: #161818;
  --modal-footer-bg: #1c1c1c;
  --modal-border: var(--border-secondary);
  --navbar-height: 64px;

  /* ========== KPI / PAGE ========== */
  --kpi-value-size: 18px;
  --page-heading-size: 20px;
  --section-heading-size: 24px;
  --page-section-gap: 12px;
  --tabs-font-size: 16px;

  /* ========== TYPE ========== */
  --font-heading: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-size-md: 11px;
  --font-size-base: 13px;
  --font-size-lg: 14px;
  --font-size-xl: 16px;
  --font-size-2xl: 19px;
  --font-size-3xl: 22px;

  /* ========== SKELETON ========== */
  --skeleton-base: #212121;
  --skeleton-shine: #2a2a2a;

  /* ========== TOAST ========== */
  --sonner-bg: var(--bg-elevation-1);
  --sonner-border: var(--border-tertiary);
  --sonner-title: var(--text-heading);
  --sonner-radius: 10px;

  /* Aliases used by the ported markup */
  --bg: var(--bg-base);
  --card: var(--bg-elevation-1);
  --card2: var(--bg-elevation-2);
  --bd: var(--border-secondary);
  --tx: var(--text-heading);
  --dim: var(--text-body);
  --faint: var(--text-disable);
  --pu: var(--bg-brand);
  --pu2: var(--bg-brand-secondary);
  --teal: var(--text-success);
  --amber: var(--text-warning);
  --red: var(--text-error);
  --blue: #3b82f6;
}