/* ==========================================================================
   DrcIT design tokens — single source of truth for color, type, and shape.
   Loaded by both the public site (partials/header.php) and the portal
   (admin/sidebar.php, after Sneat's core.css so these overrides win).
   ========================================================================== */

:root {
    /* Brand */
    --brand-50:  #eef2ff;
    --brand-100: #e0e7ff;
    --brand-200: #c7d2fe;
    --brand-400: #818cf8;
    --brand-500: #6366f1;
    --brand-600: #4f46e5;
    --brand-700: #4338ca;
    --brand-800: #3730a3;
    --accent-500: #7c3aed;
    --accent-600: #6d28d9;

    /* Neutrals */
    --ink-900: #0f172a;
    --ink-800: #1e1b4b;
    --ink-700: #1e293b;
    --ink-600: #334155;
    --ink-500: #475569;
    --ink-400: #64748b;
    --ink-300: #94a3b8;
    --ink-100: #e2e8f0;
    --ink-50:  #f8fafc;
    --paper:   #ffffff;

    /* Status */
    --ok-500: #16a34a;
    --info-500: #0ea5e9;
    --warn-500: #f59e0b;
    --danger-500: #e11d48;

    /* Gradients */
    --grad-brand: linear-gradient(135deg, var(--brand-600), var(--accent-500));
    --grad-dark: linear-gradient(135deg, #0f172a 0%, #1e1b4b 60%, #0f172a 100%);
    --grad-sidebar: linear-gradient(180deg, #191b2e 0%, #12131f 100%);

    /* Shape & motion */
    --radius-sm: .5rem;
    --radius-md: .85rem;
    --radius-lg: 1.25rem;
    --radius-xl: 1.75rem;
    --shadow-sm: 0 1px 2px rgba(15, 23, 42, .06), 0 1px 3px rgba(15, 23, 42, .04);
    --shadow-md: 0 8px 24px rgba(15, 23, 42, .08);
    --shadow-lg: 0 24px 48px -12px rgba(15, 23, 42, .16);
    --shadow-glow: 0 8px 24px rgba(79, 70, 229, .25);
    --ease: cubic-bezier(.4, 0, .2, 1);

    --bs-font-sans-serif: 'Inter', -apple-system, sans-serif;
}

/* ---------- Base type ---------- */
body { font-family: var(--bs-font-sans-serif); color: var(--ink-700); }
h1, h2, h3, h4, h5, h6 { letter-spacing: -.02em; }

.text-gradient-indigo,
.text-gradient {
    background: var(--grad-brand);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* ---------- Brand color overrides (public + portal share these) ---------- */
.btn-primary {
    background: var(--grad-brand);
    border-color: transparent;
    box-shadow: var(--shadow-glow);
    transition: transform .15s var(--ease), box-shadow .15s var(--ease), filter .15s var(--ease);
}
.btn-primary:hover, .btn-primary:focus {
    filter: brightness(1.06);
    transform: translateY(-1px);
    box-shadow: 0 12px 28px rgba(79, 70, 229, .32);
}
.btn-primary:active { transform: translateY(0); }
.btn-outline-primary { color: var(--brand-600); border-color: var(--brand-600); }
.btn-outline-primary:hover { background: var(--brand-600); border-color: var(--brand-600); }
.text-primary { color: var(--brand-600) !important; }
.bg-primary { background: var(--brand-600) !important; }
.border-primary { border-color: var(--brand-600) !important; }

/* ---------- Shape helpers ---------- */
.rounded-5 { border-radius: var(--radius-xl) !important; }
.rounded-4 { border-radius: var(--radius-lg) !important; }
.shadow-xl { box-shadow: var(--shadow-lg) !important; }

/* ---------- Motion helpers ---------- */
.feature-card, .kpi-card, .lift-card {
    transition: transform .2s var(--ease), box-shadow .2s var(--ease), border-color .2s var(--ease);
}
.feature-card:hover, .kpi-card:hover, .lift-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-md) !important;
}
.hover-zoom { transition: transform .5s var(--ease); }
.hover-zoom:hover { transform: scale(1.04); }

/* ---------- Cards (used across portal) ---------- */
.card { border-radius: var(--radius-md); }
.card.border-0 { box-shadow: var(--shadow-sm) !important; }

/* ---------- Forms ---------- */
.form-control, .form-select {
    border-radius: var(--radius-sm);
    border-color: var(--ink-100);
    padding-block: .65rem;
}
.form-control:focus, .form-select:focus {
    border-color: var(--brand-400);
    box-shadow: 0 0 0 .2rem rgba(99, 102, 241, .15);
}
.form-control-lg { border-radius: .7rem; }

/* ---------- Badges ---------- */
.badge-status-open              { background: var(--ok-500) !important; }
.badge-status-assigned          { background: var(--info-500) !important; }
.badge-status-in-progress       { background: var(--warn-500) !important; }
.badge-status-waiting-for-client{ background: var(--ink-400) !important; }
.badge-status-completed         { background: var(--brand-600) !important; }
.badge-status-closed            { background: var(--ink-600) !important; }

.min-w-0 { min-width: 0; }