@import url("https://fonts.googleapis.com/css2?family=Space+Mono:wght@400;700&family=IBM+Plex+Mono:wght@400;700&display=swap");

:root {
  /* ─────────────────────────────────────────────────────────────
     TYPOGRAPHY
  ─────────────────────────────────────────────────────────────── */
  --font-login: "IBM Plex Mono", monospace;

  /* ─────────────────────────────────────────────────────────────
     BRAND PALETTE (PareDeal - Digital Deals / Coupon Tech)
  ─────────────────────────────────────────────────────────────── */
  /* --- Primary Colors --- */
  --primary-color: #2563eb;
  --primary-light-color: #60a5fa;
  --primary-light-color-fade: #2563eb2b;

  /* --- Secondary Colors --- */
  --secondary-color: #0f172a;
  --secondary-light-color: #334155;
  --secondary-lighter-color: #64748b;
  --secondary-light-color-fade: #0f172a2b;

  /* --- Third Colors --- */
  --third-color: #f59e0b;
  --third-light-color: #fbbf24;
  --third-lighter-color: #fde68a;
  --third-light-color-fade: #f59e0b4b;

  /* --- Success --- */
  --success-color: #10b981;
  --success-light-color: #6ee7b7;
  --success-light-color-fade: #10b9812b;

  /* --- Error --- */
  --error-color: #ef4444;
  --error-light-color: #fca5a5;
  --error-light-color-fade: #ef44442b;
  
  /* ─────────────────────────────────────────────────────────────
     BASE / TEXT / SURFACES
  ─────────────────────────────────────────────────────────────── */
  --background-color: #f8fafc;
  --background-white: #ffffff;
  --text-color: #0f172a;
  --text-color-light: #f8fafc;

  /* ─────────────────────────────────────────────────────────────
     HEADER / FOOTER
  ─────────────────────────────────────────────────────────────── */
  --header-bg-color: #0b1220;
  --header-bg-color-footer: #0b1220cc;

  /* ─────────────────────────────────────────────────────────────
     ACCENTS / APP SPECIFIC
  ─────────────────────────────────────────────────────────────── */
  --profit-color: #059669;
  --profit-color-darker: #047857;
  --excel-color: #15803d;
  --excel-color-darker: #166534;
  --pdf-color: #dc2626;
  --pdf-color-darker: #b91c1c;
  --slider-active-color: #2563eb;
  --inactive-color: #cbd5e1;

  /* ─────────────────────────────────────────────────────────────
     BREADCRUMBS
  ─────────────────────────────────────────────────────────────── */
  --breadcrumb-bg: #e2e8f0;
  --breadcrumb-active: #64748b;

  /* ─────────────────────────────────────────────────────────────
     GRADIENTS / THEMING
  ─────────────────────────────────────────────────────────────── */
  --gradient-primary-start: #2563eb;
  --gradient-primary-end: #0f172a;
  --bg-primary-end: #172554;

  /* ─────────────────────────────────────────────────────────────
     DISABLED / ERROR / EXAMPLE STATES
  ─────────────────────────────────────────────────────────────── */
  --disabled-bg-color: #e5e7eb;
  --disabled-bg-color-dark: #cbd5e1;
  --disabled-color: #94a3b8;
  --error-bg-color: #fef2f2;
  --error-border-color: #ef4444;
  --error-text-color: #991b1b;
  --example-bg-color: #ffffff;
  --example-text-color: #2563eb;
  --example-border-color: rgba(37, 99, 235, 0.2);

  /* ─────────────────────────────────────────────────────────────
     STATUS COLORS
  ─────────────────────────────────────────────────────────────── */
  --status-on-color: #10b981;
  --background-status-on-color: rgba(16, 185, 129, 0.7);
  --background-status-on-color-light: rgba(16, 185, 129, 0.2);
  --status-on-rgba: 16, 185, 129;

  --status-off-color: #ef4444;
  --background-status-off-color: rgba(239, 68, 68, 0.7);
  --background-status-off-color-light: rgba(239, 68, 68, 0.2);
  --status-off-rgba: 239, 68, 68;

  --status-warning-color: #f59e0b;
  --status-warning-rgba: 245, 158, 11;

  --status-withdrawal-color: #1e293b;
  --status-withdrawal-rgba: 30, 41, 59;

  /* ─────────────────────────────────────────────────────────────
     LOGS
  ─────────────────────────────────────────────────────────────── */
  --log-info-color: #2563eb;
  --log-warning-color: #f59e0b;
  --log-error-color: #ef4444;
  --log-critical-color: #7c3aed;

  /* ─────────────────────────────────────────────────────────────
     OVERLAYS / BACKGROUND LAYERS
  ─────────────────────────────────────────────────────────────── */
  --background-overlay: rgba(255, 255, 255, 0.55);
  --background-secondary: rgba(37, 99, 235, 0.08);
  --background-secondary-settings: #64748b;

  --background-dark0: rgba(11, 18, 32, 0);
  --background-dark_1: rgba(255, 255, 255, 0.82);
  --background-dark_2: rgba(226, 232, 240, 0.72);
  --background-dark_3: rgba(37, 99, 235, 0.08);
  --background-dark_4: rgba(96, 165, 250, 0.18);
  --background-dark: rgba(15, 23, 42, 0.12);
  --background-dark2: rgba(15, 23, 42, 0.2);
  --background-dark3: rgba(15, 23, 42, 0.58);
  --background-dark4: rgba(15, 23, 42, 0.82);

  /* ─────────────────────────────────────────────────────────────
     GLASSMORPHISM
  ─────────────────────────────────────────────────────────────── */
  --inner-circle-color: rgba(255, 255, 255, 0.84);
  --glass-bg-color: rgba(255, 255, 255, 0.62);
  --glass-border-color: rgba(255, 255, 255, 0.42);
  --glass-text-shadow: rgba(15, 23, 42, 0.12);
  --glass-box-shadow: rgba(37, 99, 235, 0.08);
  --glass-hover-bg-color: rgba(255, 255, 255, 0.74);

  /* ─────────────────────────────────────────────────────────────
     SHADOWS / RADII
  ─────────────────────────────────────────────────────────────── */
  --tz-box-shadow: 0 4px 15px rgba(15, 23, 42, 0.08);
  --tz-border-radius: 0.75rem;
  --box-shadow-color: rgba(15, 23, 42, 0.1);
  --box-shadow-hover-color: rgba(37, 99, 235, 0.18);

  /* ─────────────────────────────────────────────────────────────
     INPUTS
  ─────────────────────────────────────────────────────────────── */
  --input-border-color: rgba(15, 23, 42, 0.18);
  --input-hover-border-color: #2563eb;
  --input-bg-color: #ffffff;
  --input-hover-bg-color: #eff6ff;

  /* ─────────────────────────────────────────────────────────────
     CARDS
  ─────────────────────────────────────────────────────────────── */
  --card-border-color: rgba(15, 23, 42, 0.08);
  --card-bg-color: rgba(255, 255, 255, 0.92);
  --card-hover-bg-color: #f8fbff;

  /* ─────────────────────────────────────────────────────────────
     SLIDERS
  ─────────────────────────────────────────────────────────────── */
  --pip-text-color: var(--text-color);
  --slider-bg-color: var(--inactive-color);
  --slider-connect-color: var(--primary-color);
  --slider-handle-border: var(--primary-color);
  --slider-tooltip-border: var(--primary-color);
  --slider-tooltip-text: var(--primary-color);
  --slider-tooltip-bg: var(--background-white);

  /* ─────────────────────────────────────────────────────────────
     VENDOR / BOOTSTRAP OVERRIDES
  ─────────────────────────────────────────────────────────────── */
  --bs-form-check-bg-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%232563eb' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e");

  --bg-deep: #0b1220;
  --bg-soft: #172554;
  --card: rgba(15, 23, 42, .78);
  --card-2: rgba(37, 99, 235, .18);
  --border: rgba(37, 99, 235, .12);
  --border-strong: rgba(37, 99, 235, .28);
  --text: #f8fafc;
  --muted: #94a3b8;
  --accent: #2563eb;
  --accent-2: #f59e0b;
  --success: #10b981;
  --warning: #f59e0b;
  --danger: #ef4444;
  --shadow: 0 20px 60px rgba(0, 0, 0, .24);
  --radius: 18px;
  --radius-sm: 12px;
}