@import url('./colors.css');
@import url('./borders.css');
@import url('./spacing.css');
@import url('./typography.css');
@import url('./shadows.css');
@import url('./animations.css');

/* =========================================================
   ROOT TOKENS
   ========================================================= */

:root {
    /* =====================================================
       CORE SURFACES
       ===================================================== */

    --hc-bg: #ffffff;
    --hc-surface-bg: #ffffff;
    --hc-surface-muted-bg: #f8fafc;
    --hc-surface-color: #111827;
    --hc-heading-color: #0f172a;
    --hc-text: #334155;
    --hc-text-soft: #94a3b8;
    --hc-muted-color: #6b7280;
    /* =====================================================
       COLOR PALETTE
       ===================================================== */

    --hc-red: #ef4444;
    --hc-orange: #f97316;
    --hc-amber: #f59e0b;
    --hc-yellow: #eab308;
    --hc-lime: #84cc16;
    --hc-green: #22c55e;
    --hc-emerald: #10b981;
    --hc-teal: #14b8a6;
    --hc-cyan: #06b6d4;
    --hc-sky: #0ea5e9;
    --hc-blue: #3b82f6;
    --hc-indigo: #6366f1;
    --hc-violet: #8b5cf6;
    --hc-purple: #a855f7;
    --hc-fuchsia: #d946ef;
    --hc-pink: #ec4899;
    --hc-rose: #f43f5e;
    /* =====================================================
       COLOR BACKGROUNDS
       ===================================================== */

    --hc-red-bg: #fef2f2;
    --hc-orange-bg: #fff7ed;
    --hc-amber-bg: #fffbeb;
    --hc-yellow-bg: #fefce8;
    --hc-lime-bg: #f7fee7;
    --hc-green-bg: #f0fdf4;
    --hc-emerald-bg: #ecfdf5;
    --hc-teal-bg: #f0fdfa;
    --hc-cyan-bg: #ecfeff;
    --hc-sky-bg: #f0f9ff;
    --hc-blue-bg: #eff6ff;
    --hc-indigo-bg: #eef2ff;
    --hc-violet-bg: #f5f3ff;
    --hc-purple-bg: #faf5ff;
    --hc-fuchsia-bg: #fdf4ff;
    --hc-pink-bg: #fdf2f8;
    --hc-rose-bg: #fff1f2;
    /* =====================================================
       SEMANTIC COLORS
       ===================================================== */

    --hc-primary: var(--hc-indigo);
    --hc-success: #198754;
    --hc-warning: var(--hc-amber);
    --hc-error: #dc3545;
    --hc-info: #0d6efd;
    --hc-primary-bg: var(--hc-indigo-bg);
    --hc-success-bg: var(--hc-green-bg);
    --hc-warning-bg: var(--hc-amber-bg);
    --hc-error-bg: var(--hc-red-bg);
    --hc-info-bg: var(--hc-blue-bg);
    /* =====================================================
       BORDERS
       ===================================================== */

    --hc-border: #d4d4d8;
    --hc-border-color: rgba(15, 23, 42, .10);
    --hc-border-soft: rgba(15, 23, 42, .06);
    --hc-border-hover: #a5b4fc;
    --hc-border-focus: #818cf8;
    /* =====================================================
       STATES
       ===================================================== */

    --hc-hover: rgba(99, 102, 241, .08);
    --hc-active: rgba(99, 102, 241, .12);
    --hc-selected: rgba(99, 102, 241, .16);
    /* =====================================================
       TYPOGRAPHY
       ===================================================== */

    --hc-font-size-xs: .75rem;
    --hc-font-size-sm: .875rem;
    --hc-font-size-md: .95rem;
    --hc-font-size-lg: 1rem;
    --hc-font-size-xl: 1.25rem;
    --hc-font-weight-normal: 400;
    --hc-font-weight-medium: 500;
    --hc-font-weight-semibold: 600;
    --hc-font-weight-bold: 700;
    /* =====================================================
       SPACING
       ===================================================== */

    --hc-spacing-xs: .25rem;
    --hc-spacing-sm: .5rem;
    --hc-spacing-md: 1rem;
    --hc-spacing-lg: 1.5rem;
    --hc-spacing-xl: 2rem;
    --hc-spacing-xxl: 3rem;
    /* =====================================================
       SHADOWS
       ===================================================== */

    --hc-shadow-focus: 0 0 0 5px rgba(99, 102, 241, .10);
    --hc-shadow-menu: 0 24px 48px rgba(15, 23, 42, .14), 0 8px 18px rgba(15, 23, 42, .08);
    --hc-shadow-sm: 0 1px 2px rgba(15, 23, 42, .04);
    --hc-shadow-md: 0 4px 6px rgba(15, 23, 42, .06), 0 2px 4px rgba(15, 23, 42, .04);
    --hc-shadow-lg: 0 10px 15px rgba(15, 23, 42, .08), 0 4px 6px rgba(15, 23, 42, .04);
    /* =====================================================
       RADIUS
       ===================================================== */

    --hc-radius-control: 18px;
    --hc-radius-item: 16px;
    --hc-radius-small: 12px;
    --hc-radius-sm: .5rem;
    --hc-radius-md: .75rem;
    --hc-radius-lg: 1rem;
    --hc-radius-xl: 1.25rem;
    /* =====================================================
       MOTION
       ===================================================== */

    --hc-transition: border-color .16s ease, box-shadow .16s ease, transform .12s ease;
    --hc-transition-fast: .15s ease;
    --hc-transition-base: .25s ease;
    /* =====================================================
       LAYOUT
       ===================================================== */

    --hc-shell-bg: #f8fafc;
    --hc-shell-sidebar-width: 18rem;
    --hc-shell-sidebar-collapsed-width: 4rem;
    --hc-z-base: 1;
    --hc-z-dropdown: 1200;
    --hc-z-sticky: 1020;
    --hc-z-fixed: 1030;
    --hc-z-drawer: 1040;
    --hc-z-modal: 1050;
    --hc-z-popover: 1060;
    --hc-z-tooltip: 1070;
    --hc-z-toast: 1080;
    /* =====================================================
       FORM CONTROL GLOW
       ===================================================== */

    --hc-form-control-glow-space: .375rem;
    --hc-active-glow-color: 99, 102, 241;
    --hc-active-glow-opacity: .12;
    --hc-active-glow-size: 5px;
    --hc-active-glow: 0 0 0 var(--hc-active-glow-size) rgba(var(--hc-active-glow-color), var(--hc-active-glow-opacity));
    /* =====================================================
       INPUTS
       ===================================================== */

    --hc-input-height-sm: 3.05rem;
    --hc-input-height-md: 4.55rem;
    --hc-input-height-lg: 5.05rem;
    --hc-input-padding-x: 1rem;
    --hc-input-padding-y: .75rem;
    --hc-input-radius-sm: var(--hc-radius-sm);
    --hc-input-radius-md: var(--hc-radius-md);
    --hc-input-radius-lg: var(--hc-radius-lg);
    --hc-input-bg: var(--hc-surface-bg);
    --hc-input-text-color: var(--hc-surface-color);
    --hc-input-placeholder-color: #9ca3af;
    --hc-input-placeholder: var(--hc-input-placeholder-color);
    --hc-input-icon-color: var(--hc-muted-color);
    --hc-input-border: var(--hc-border-color);
    --hc-input-border-color: var(--hc-border-color);
    --hc-input-border-hover-color: var(--hc-border-hover);
    --hc-input-border-focus-color: var(--hc-border-focus);
    --hc-input-border-success-color: var(--hc-success);
    --hc-input-border-warning-color: var(--hc-warning);
    --hc-input-border-error-color: var(--hc-error);
    --hc-input-shadow-hover: 0 0 0 4px rgba(var(--hc-active-glow-color), .08);
    --hc-input-shadow-focus: var(--hc-active-glow);
    --hc-input-dropdown-shadow: 0 18px 48px rgba(15, 23, 42, .12);
    --hc-input-transition-speed: .2s;
    --hc-input-transition: all var(--hc-input-transition-speed) ease;
    --hc-input-dropdown-zindex: 2147483000;
    --hc-input-backdrop-zindex: 2147482990;
    /* =====================================================
       SELECTS
       ===================================================== */

    --hc-select-height-sm: var(--hc-input-height-sm);
    --hc-select-height-md: var(--hc-input-height-md);
    --hc-select-height-lg: var(--hc-input-height-lg);
    --hc-select-padding-x: 1rem;
    --hc-select-font-size: var(--hc-font-size-md);
    --hc-select-radius-sm: var(--hc-radius-sm);
    --hc-select-radius-md: var(--hc-radius-md);
    --hc-select-radius-lg: var(--hc-radius-lg);
    --hc-select-bg: var(--hc-surface-bg);
    --hc-select-border: var(--hc-border-color);
    --hc-select-border-hover: var(--hc-border-hover);
    --hc-select-border-focus: var(--hc-border-focus);
    --hc-select-shadow-hover: var(--hc-input-shadow-hover);
    --hc-select-shadow-focus: var(--hc-input-shadow-focus);
    --hc-select-shadow-menu: var(--hc-shadow-menu);
    --hc-select-menu-zindex: 2147483000;
    --hc-select-menu-max-height: 420px;
}