/* ============================================
   DESIGN SYSTEM — Kringloop Jager Admin
   Version: 1.0 | Updated: 2026-06-07
   DO NOT import values from other files.
   All values live here.
   Spec: DESIGN_SYSTEM_ADMIN.md
   ============================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

/* --- Colours --- */
:root {
  --color-primary: #4263EB;
  --color-primary-light: #EDF2FF;
  --color-primary-dark: #3B5BDB;

  --color-sidebar-bg: #1A2332;
  --color-sidebar-text: #A9B4C4;
  --color-sidebar-text-active: #FFFFFF;
  --color-sidebar-hover: rgba(255, 255, 255, 0.06);

  --color-background: #F1F3F5;
  --color-surface: #FFFFFF;
  --color-surface-alt: #F8F9FA;
  --color-border: #DEE2E6;
  --color-border-strong: #ADB5BD;

  --color-text: #212529;
  --color-text-body: #343A40;
  --color-text-muted: #868E96;

  --color-success: #2B8A3E;
  --color-success-light: #D3F9D8;
  --color-warning: #E67700;
  --color-warning-light: #FFF3BF;
  --color-error: #C92A2A;
  --color-error-dark: #B02525;
  --color-error-light: #FFE3E3;
  --color-info: #1971C2;
  --color-info-light: #D0EBFF;

  --color-backdrop: rgba(26, 35, 50, 0.5);
  --color-skeleton: #E9ECEF;
}

/* --- Typography --- */
:root {
  --font-body: 'Inter', system-ui, -apple-system, sans-serif;
  --font-display: 'Inter', system-ui, -apple-system, sans-serif;

  --text-display-size: 1.5rem;     /* 24px */
  --text-display-weight: 700;
  --text-display-line-height: 1.25;

  --text-h1-size: 1.25rem;         /* 20px */
  --text-h1-weight: 700;
  --text-h1-line-height: 1.3;

  --text-h2-size: 1.0625rem;       /* 17px */
  --text-h2-weight: 600;
  --text-h2-line-height: 1.35;

  --text-h3-size: 0.9375rem;       /* 15px */
  --text-h3-weight: 600;
  --text-h3-line-height: 1.4;

  --text-h4-size: 0.8125rem;       /* 13px */
  --text-h4-weight: 600;
  --text-h4-line-height: 1.4;
  --text-h4-letter-spacing: 0.04em;
  --text-h4-transform: uppercase;

  --text-body-size: 0.875rem;      /* 14px */
  --text-body-weight: 400;
  --text-body-line-height: 1.55;

  --text-body-sm-size: 0.8125rem;  /* 13px */
  --text-body-sm-weight: 400;
  --text-body-sm-line-height: 1.5;

  --text-label-size: 0.75rem;      /* 12px */
  --text-label-weight: 500;
  --text-label-line-height: 1.4;

  --text-caption-size: 0.6875rem;  /* 11px */
  --text-caption-weight: 400;
  --text-caption-line-height: 1.4;

  --text-stat-size: 1.375rem;      /* 22px */
  --text-stat-weight: 700;
  --text-stat-line-height: 1.2;
}

/* --- Spacing --- */
:root {
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;

  --layout-sidebar-width: 232px;
  --layout-content-max-width: 1280px;
  --layout-content-padding: var(--space-8);
}

/* --- Shape --- */
:root {
  --radius-none: 0;
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;
  --radius-xl: 12px;
  --radius-full: 9999px;
}

/* --- Shadows --- */
:root {
  --shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.06);
  --shadow-md: 0 4px 8px rgba(16, 24, 40, 0.10);
  --shadow-lg: 0 12px 32px rgba(16, 24, 40, 0.18);
}

/* --- Animation --- */
:root {
  --duration-fast: 100ms;
  --duration-base: 200ms;
  --duration-slow: 400ms;
  --ease-out: cubic-bezier(0, 0, 0.2, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
}

/* --- Component sizing --- */
:root {
  --control-height-md: 36px;
  --control-height-sm: 30px;
  --icon-button-size: 28px;
  --icon-size-table: 16px;
  --icon-size-nav: 20px;
  --modal-width-form: 480px;
  --modal-width-pdp: 760px;
  --focus-ring: 0 0 0 3px var(--color-primary-light);
}