/* ==========================================
   OneToolBox Enterprise
   variables.css
   Design Tokens v1.0
========================================== */

:root{

/* ===============================
   BRAND COLORS
================================ */

--primary:#2563eb;
--primary-hover:#1d4ed8;
--primary-light:#dbeafe;

--secondary:#7c3aed;
--secondary-hover:#6d28d9;
--secondary-light:#ede9fe;

--success:#16a34a;
--success-light:#dcfce7;

--warning:#f59e0b;
--warning-light:#fef3c7;

--danger:#dc2626;
--danger-light:#fee2e2;

--info:#0891b2;
--info-light:#cffafe;


/* ===============================
   BACKGROUND
================================ */

--bg:#f8fafc;
--bg-soft:#f1f5f9;
--bg-card:#ffffff;
--bg-dark:#0f172a;


/* ===============================
   TEXT
================================ */

--text:#0f172a;
--text-light:#475569;
--text-muted:#64748b;
--text-white:#ffffff;


/* ===============================
   BORDER
================================ */

--border:#e2e8f0;
--border-light:#f1f5f9;
--border-dark:#cbd5e1;


/* ===============================
   SHADOW
================================ */

--shadow-xs:0 1px 2px rgba(0,0,0,.05);

--shadow-sm:0 2px 6px rgba(0,0,0,.08);

--shadow-md:0 8px 20px rgba(0,0,0,.10);

--shadow-lg:0 18px 40px rgba(0,0,0,.12);

--shadow-xl:0 25px 60px rgba(0,0,0,.18);


/* ===============================
   GLASS EFFECT
================================ */

--glass-bg:rgba(255,255,255,.75);

--glass-border:rgba(255,255,255,.35);

--glass-blur:18px;


/* ===============================
   GRADIENTS
================================ */

--gradient-primary:
linear-gradient(
135deg,
#2563eb,
#3b82f6
);

--gradient-success:
linear-gradient(
135deg,
#22c55e,
#16a34a
);

--gradient-danger:
linear-gradient(
135deg,
#ef4444,
#dc2626
);

--gradient-dark:
linear-gradient(
135deg,
#0f172a,
#1e293b
);

}
/* ==========================================
   TYPOGRAPHY
========================================== */

:root{

--font-family:
"Inter",
"Segoe UI",
Roboto,
Helvetica,
Arial,
sans-serif;

--font-mono:
"Consolas",
"Courier New",
monospace;

--font-xs:12px;
--font-sm:14px;
--font-md:16px;
--font-lg:18px;
--font-xl:20px;
--font-2xl:24px;
--font-3xl:30px;
--font-4xl:36px;
--font-5xl:48px;

--fw-light:300;
--fw-normal:400;
--fw-medium:500;
--fw-semibold:600;
--fw-bold:700;
--fw-black:900;

--line-tight:1.2;
--line-normal:1.5;
--line-loose:1.8;


/* ==========================================
   SPACING
========================================== */

--space-2:2px;
--space-4:4px;
--space-6:6px;
--space-8:8px;
--space-10:10px;
--space-12:12px;
--space-16:16px;
--space-20:20px;
--space-24:24px;
--space-28:28px;
--space-32:32px;
--space-40:40px;
--space-48:48px;
--space-56:56px;
--space-64:64px;
--space-72:72px;
--space-80:80px;
--space-96:96px;


/* ==========================================
   BORDER RADIUS
========================================== */

--radius-xs:4px;
--radius-sm:8px;
--radius-md:12px;
--radius-lg:18px;
--radius-xl:24px;
--radius-2xl:32px;
--radius-round:999px;


/* ==========================================
   CONTAINER
========================================== */

--container-xs:540px;
--container-sm:720px;
--container-md:960px;
--container-lg:1140px;
--container-xl:1280px;
--container-2xl:1440px;


/* ==========================================
   HEADER / FOOTER
========================================== */

--header-height:72px;
--footer-padding:80px;
--sidebar-width:280px;


/* ==========================================
   BUTTONS
========================================== */

--btn-height-sm:38px;
--btn-height:46px;
--btn-height-lg:56px;

--btn-padding:0 24px;


/* ==========================================
   INPUTS
========================================== */

--input-height:48px;
--input-radius:14px;


/* ==========================================
   CARD
========================================== */

--card-padding:24px;
--card-gap:20px;
--card-radius:18px;

}
/* ==========================================
   OneToolBox Enterprise
   variables.css
   Part 3
========================================== */

:root{

/* ==========================================
   TRANSITIONS
========================================== */

--transition-fast:.15s ease;
--transition:.25s ease;
--transition-slow:.4s ease;
--transition-bounce:.45s cubic-bezier(.34,1.56,.64,1);


/* ==========================================
   ANIMATION
========================================== */

--animation-fast:.25s;
--animation:.40s;
--animation-slow:.70s;


/* ==========================================
   Z-INDEX
========================================== */

--z-dropdown:100;
--z-sticky:500;
--z-header:1000;
--z-overlay:1200;
--z-modal:1300;
--z-toast:1400;
--z-tooltip:1500;
--z-loader:9999;


/* ==========================================
   BREAKPOINTS
========================================== */

--mobile:480px;
--mobile-lg:576px;
--tablet:768px;
--tablet-lg:992px;
--desktop:1200px;
--wide:1400px;


/* ==========================================
   OPACITY
========================================== */

--opacity-disabled:.55;
--opacity-hover:.90;


/* ==========================================
   LOADER
========================================== */

--loader-size:60px;
--loader-border:6px;


/* ==========================================
   MODAL
========================================== */

--modal-width:650px;
--modal-radius:22px;
--modal-overlay:rgba(15,23,42,.55);


/* ==========================================
   TOAST
========================================== */

--toast-width:380px;
--toast-radius:16px;


/* ==========================================
   UPLOAD BOX
========================================== */

--upload-height:260px;
--upload-radius:24px;
--upload-border:2px dashed var(--border);


/* ==========================================
   RESULT BOX
========================================== */

--result-radius:20px;
--result-padding:24px;


/* ==========================================
   SEARCH
========================================== */

--search-height:48px;
--search-radius:999px;


/* ==========================================
   SCROLLBAR
========================================== */

--scrollbar-width:10px;
--scrollbar-radius:999px;


/* ==========================================
   IMAGE PREVIEW
========================================== */

--preview-radius:18px;
--preview-bg:#f8fafc;


/* ==========================================
   PDF VIEWER
========================================== */

--pdf-radius:16px;
--pdf-toolbar-height:52px;

}


/* ==========================================
   DARK MODE
========================================== */

body.dark{

--bg:#020617;
--bg-soft:#0f172a;
--bg-card:#1e293b;

--text:#f8fafc;
--text-light:#e2e8f0;
--text-muted:#94a3b8;

--border:#334155;
--border-light:#1e293b;
--border-dark:#475569;

--glass-bg:rgba(15,23,42,.82);
--glass-border:rgba(255,255,255,.08);

--preview-bg:#0f172a;

}
/* ==========================================
   OneToolBox Enterprise
   variables.css
   Part 4 (Final)
========================================== */

:root{

/* ==========================================
   NAVBAR
========================================== */

--navbar-height:72px;
--navbar-bg:rgba(255,255,255,.88);
--navbar-border:rgba(226,232,240,.85);


/* ==========================================
   FOOTER
========================================== */

--footer-bg:#0f172a;
--footer-text:#cbd5e1;
--footer-heading:#ffffff;
--footer-link:#94a3b8;
--footer-link-hover:#ffffff;


/* ==========================================
   HERO SECTION
========================================== */

--hero-padding:90px;
--hero-title:58px;
--hero-subtitle:20px;


/* ==========================================
   SIDEBAR
========================================== */

--sidebar-width:280px;
--sidebar-bg:#ffffff;
--sidebar-radius:20px;


/* ==========================================
   BADGE
========================================== */

--badge-height:28px;
--badge-radius:999px;
--badge-padding:0 12px;


/* ==========================================
   AVATAR
========================================== */

--avatar-sm:36px;
--avatar-md:48px;
--avatar-lg:72px;
--avatar-xl:120px;


/* ==========================================
   TABLE
========================================== */

--table-row:54px;
--table-radius:16px;


/* ==========================================
   DROPDOWN
========================================== */

--dropdown-radius:16px;
--dropdown-shadow:var(--shadow-lg);


/* ==========================================
   TOOLTIP
========================================== */

--tooltip-radius:10px;
--tooltip-padding:8px 12px;


/* ==========================================
   PROGRESS BAR
========================================== */

--progress-height:8px;
--progress-radius:999px;


/* ==========================================
   SKELETON
========================================== */

--skeleton-bg:#e2e8f0;
--skeleton-radius:10px;


/* ==========================================
   CHARTS
========================================== */

--chart-blue:#2563eb;
--chart-green:#22c55e;
--chart-orange:#f59e0b;
--chart-red:#ef4444;
--chart-purple:#8b5cf6;


/* ==========================================
   STATUS COLORS
========================================== */

--online:#22c55e;
--offline:#94a3b8;
--busy:#ef4444;
--away:#f59e0b;


/* ==========================================
   FILE UPLOAD
========================================== */

--dropzone-border:2px dashed #cbd5e1;
--dropzone-hover:#dbeafe;


/* ==========================================
   PRINT
========================================== */

--print-bg:#ffffff;
--print-text:#000000;


/* ==========================================
   DEVELOPER
========================================== */

--debug-outline:1px dashed red;

}


/* ==========================================
   DARK MODE EXTENSIONS
========================================== */

body.dark{

--navbar-bg:rgba(15,23,42,.90);
--navbar-border:#334155;

--sidebar-bg:#1e293b;

--footer-bg:#020617;

--footer-text:#94a3b8;

--footer-link:#94a3b8;

--footer-link-hover:#ffffff;

--skeleton-bg:#334155;

--dropzone-border:2px dashed #475569;

--dropzone-hover:#1e40af;

}


/* ==========================================
   END
========================================== */