/**
 * tokens.css
 * Design-token foundation — UI/UX §0.1 (Visual Language).
 * Every portal stylesheet and component built from Phase 4 onward
 * reads these variables rather than hardcoding colors/radii/shadows,
 * so a single palette tweak here propagates everywhere.
 *
 * This version expands the original single-palette foundation into a
 * full spacing / elevation / type / focus scale so that every module
 * can build consistent, "world-class" spacing and depth without
 * inventing its own local values.
 */

/* Optional webfont: Manrope with Inter fallback. Degrades gracefully
   to the system stack if the network is unavailable. */
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&display=swap');

/* Font Awesome — loaded here so every page (sidebar, topbar, buttons,
   status icons) gets consistent icons without each page re-declaring
   the stylesheet. Degrades gracefully to text if offline. */
@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css');

/* Global component library — loaded on every page via tokens.css so
   the shared .hulk-btn / .hulk-table / .hulk-badge / spacing utilities
   are available everywhere without per-page includes. */
@import url('components.css');

/* Select2 (searchable dropdowns) — base stylesheet + Hulk orange theme.
   Loaded on every page via tokens.css so EVERY <select> renders with the
   themed control without per-page includes. */
@import url('../../packages/select2/select2.min.css');
@import url('select2-hulk.css');

:root {
  /* ---- Surface / neutral canvas (soft, layered slate) -------------- */
  --hulk-bg: #f5f7fb;
  --hulk-bg-alt: #eef2f9;
  --hulk-bg-sunken: #e9edf5;
  --hulk-surface: #ffffff;
  --hulk-surface-2: #fbfcfe;
  --hulk-surface-3: #f4f6fb;
  --hulk-border: #e6e9f2;
  --hulk-border-strong: #d6dbe8;
  --hulk-border-faint: #eef1f7;
  --hulk-text: #161a26;
  --hulk-text-muted: #5e657b;
  --hulk-text-faint: #9aa1b6;
  --hulk-text-on-accent: #ffffff;

  /* ---- Gradient family (pipeline-themed, §0.1) --------------------- */
  /* "flow" — primary / brand actions (orange theme, §0.1 refresh) */
  --hulk-gradient-flow: linear-gradient(135deg, #f97316 0%, #fb923c 100%);
  /* "close" — sales / converted states (teal -> emerald) */
  --hulk-gradient-close: linear-gradient(135deg, #14b8a6 0%, #22c55e 100%);
  /* pending / awaiting approval */
  --hulk-gradient-pending: linear-gradient(135deg, #f59e0b 0%, #fbbf24 100%);
  /* blocked / negative-margin / overdue */
  --hulk-gradient-blocked: linear-gradient(135deg, #f43f5e 0%, #fb7185 100%);
  /* negotiate (used by customer tiers, etc.) */
  --hulk-gradient-negotiate: linear-gradient(135deg, #f97316 0%, #ea580c 100%);

  --hulk-color-flow: #f97316;
  --hulk-color-close: #14b8a6;
  --hulk-color-pending: #f59e0b;
  --hulk-color-blocked: #f43f5e;

  /* solid tints (for subtle fills / soft badges) */
  --hulk-tint-flow: rgba(249, 115, 22, 0.12);
  --hulk-tint-close: rgba(20, 184, 166, 0.12);
  --hulk-tint-pending: rgba(245, 158, 11, 0.14);
  --hulk-tint-blocked: rgba(244, 63, 94, 0.12);

  /* ---- Per-portal accent (orange theme, §0.1 refresh) ------------- */
  --hulk-accent-dev: #f97316;
  --hulk-accent-superadmin: #ea580c;
  --hulk-accent-admin: #fb923c;
  --hulk-accent-staff: #f59e0b;
  --hulk-accent-store: #f97316;
  --hulk-accent-warehouse: #d97706;

  --hulk-accent-dev-gradient: linear-gradient(135deg, #f97316 0%, #fb923c 100%);
  --hulk-accent-superadmin-gradient: linear-gradient(135deg, #ea580c 0%, #f97316 100%);
  --hulk-accent-admin-gradient: linear-gradient(135deg, #fb923c 0%, #fdba74 100%);
  --hulk-accent-staff-gradient: linear-gradient(135deg, #f59e0b 0%, #fbbf24 100%);
  --hulk-accent-store-gradient: linear-gradient(135deg, #f97316 0%, #fb923c 100%);
  --hulk-accent-warehouse-gradient: linear-gradient(135deg, #d97706 0%, #f59e0b 100%);

  /* ---- Spacing scale (4px base, generous & consistent) ------------ */
  --hulk-space-0: 0;
  --hulk-space-1: 4px;
  --hulk-space-2: 8px;
  --hulk-space-3: 12px;
  --hulk-space-4: 16px;
  --hulk-space-5: 20px;
  --hulk-space-6: 24px;
  --hulk-space-7: 32px;
  --hulk-space-8: 40px;
  --hulk-space-9: 48px;
  --hulk-space-10: 64px;

  /* ---- Radii -------------------------------------------------------- */
  --hulk-radius-xs: 6px;
  --hulk-radius-sm: 10px;
  --hulk-radius-md: 14px;
  --hulk-radius-lg: 18px;
  --hulk-radius-xl: 24px;
  --hulk-radius-2xl: 28px;
  --hulk-radius-pill: 999px;

  /* ---- Elevation (soft, layered, low-contrast) -------------------- */
  --hulk-shadow-xs: 0 1px 2px rgba(16, 24, 40, 0.05);
  --hulk-shadow-sm: 0 1px 3px rgba(16, 24, 40, 0.06), 0 1px 2px rgba(16, 24, 40, 0.04);
  --hulk-shadow-card: 0 4px 14px rgba(16, 24, 40, 0.06), 0 1px 3px rgba(16, 24, 40, 0.04);
  --hulk-shadow-card-hover: 0 14px 34px rgba(16, 24, 40, 0.12), 0 4px 10px rgba(16, 24, 40, 0.06);
  --hulk-shadow-pop: 0 24px 60px rgba(16, 24, 40, 0.18), 0 8px 20px rgba(16, 24, 40, 0.10);
  --hulk-shadow-inset: inset 0 0 0 1px var(--hulk-border);

  /* ---- Typography (geometric-humanist sans, §0.1) ------------------ */
  --hulk-font: 'Manrope', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --hulk-font-size-2xs: 11px;
  --hulk-font-size-xs: 12px;
  --hulk-font-size-sm: 13px;
  --hulk-font-size-body: 14px;
  --hulk-font-size-body-lg: 15px;
  --hulk-font-size-md: 16px;
  --hulk-font-size-lg: 18px;
  --hulk-font-size-xl: 20px;
  --hulk-font-size-2xl: 24px;
  --hulk-font-size-3xl: 30px;
  --hulk-font-size-4xl: 38px;

  --hulk-font-weight-regular: 400;
  --hulk-font-weight-medium: 500;
  --hulk-font-weight-semibold: 600;
  --hulk-font-weight-heading: 700;
  --hulk-font-weight-extrabold: 800;
  --hulk-letter-spacing-heading: -0.02em;
  --hulk-letter-spacing-tight: -0.01em;
  --hulk-line-height-tight: 1.25;
  --hulk-line-height-base: 1.5;

  /* ---- Focus ring (accessible, accent-aware) ----------------------- */
  --hulk-ring-width: 3px;
  --hulk-ring-color: color-mix(in srgb, var(--hulk-portal-accent, var(--hulk-accent-admin)) 30%, transparent);
  --hulk-ring: 0 0 0 var(--hulk-ring-width) var(--hulk-ring-color);

  /* ---- Motion (nothing longer than ~250ms, §0.1) ------------------ */
  --hulk-motion-fast: 140ms cubic-bezier(0.4, 0, 0.2, 1);
  --hulk-motion-base: 220ms cubic-bezier(0.4, 0, 0.2, 1);
  --hulk-motion-slow: 320ms cubic-bezier(0.16, 1, 0.3, 1);
  --hulk-motion-hover-lift: -3px;
  --hulk-motion-pop: scale(0.98);

  /* ---- Layout shell metrics (§0.2, §0.5) --------------------------- */
  --hulk-sidebar-width: 256px;
  --hulk-sidebar-rail-width: 76px;
  --hulk-topbar-height: 68px;
  --hulk-bottomnav-height: 68px;
  --hulk-content-max-width: 1480px;
  --hulk-page-pad-x: 32px;
  --hulk-page-pad-y: 32px;

  /* ---- Status pill semantic aliases ------------------------------- */
  --hulk-status-flow: var(--hulk-gradient-flow);
  --hulk-status-close: var(--hulk-gradient-close);
  --hulk-status-pending: var(--hulk-gradient-pending);
  --hulk-status-blocked: var(--hulk-gradient-blocked);
}

/* ---- Base reset: known, predictable baseline ----------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background:
    radial-gradient(1200px 620px at 100% -12%, rgba(249, 115, 22, 0.09), transparent 60%),
    radial-gradient(1000px 520px at -8% 108%, rgba(249, 115, 22, 0.05), transparent 55%),
    var(--hulk-bg);
  background-attachment: fixed;
  color: var(--hulk-text);
  font-family: var(--hulk-font);
  font-size: var(--hulk-font-size-body);
  line-height: var(--hulk-line-height-base);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  /* Hard guard against any element blowing past the viewport width
     (wide tables, fixed min-widths, kanban boards…). `clip` (not
     `hidden`) keeps position:sticky inside the shell working. */
  overflow-x: clip;
  width: 100%;
}

h1, h2, h3, h4, h5, h6 {
  font-weight: var(--hulk-font-weight-heading);
  letter-spacing: var(--hulk-letter-spacing-heading);
  line-height: var(--hulk-line-height-tight);
  margin: 0;
  color: var(--hulk-text);
}

p {
  margin: 0;
}

a {
  color: inherit;
  text-decoration: none;
}

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

::selection {
  background: color-mix(in srgb, var(--hulk-accent-admin) 24%, transparent);
}

/* Accessible, consistent focus treatment everywhere. */
:focus-visible {
  outline: none;
  box-shadow: var(--hulk-ring);
  border-radius: var(--hulk-radius-sm);
}

/* A touch of refinement on scrollbars (WebKit + Firefox). */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--hulk-border-strong) transparent;
}

*::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

*::-webkit-scrollbar-track {
  background: transparent;
}

*::-webkit-scrollbar-thumb {
  background: var(--hulk-border-strong);
  border-radius: var(--hulk-radius-pill);
  border: 2px solid transparent;
  background-clip: content-box;
}

*::-webkit-scrollbar-thumb:hover {
  background: var(--hulk-text-faint);
  background-clip: content-box;
}

/* ---- Card primitive (shared base used by every module) ------------ */
.hulk-card {
  background: var(--hulk-surface);
  border: 1px solid var(--hulk-border-faint);
  border-radius: var(--hulk-radius-lg);
  box-shadow: var(--hulk-shadow-card);
  transition: box-shadow var(--hulk-motion-base), transform var(--hulk-motion-base), border-color var(--hulk-motion-base);
}

.hulk-card:hover {
  box-shadow: var(--hulk-shadow-card-hover);
  border-color: color-mix(in srgb, var(--hulk-portal-accent, var(--hulk-accent-admin)) 35%, var(--hulk-border));
  transform: translateY(-3px);
}