/* VendFlow Design Tokens — derived from Figma mockups */
/* @see Design/README.md for source */
/* Fonts loaded via <link> in root.tsx */

:root {
  /* Colors */
  --sidebar-bg: #111110;
  --content-bg: #f6f6f4;
  --primary: #18181b;
  --primary-text: #ffffff;
  --secondary-bg: #ffffff;
  --secondary-border: #e4e4e7;
  --accent-green: #10b981;
  --link-green: #096966;

  /* Status colors */
  --status-ordered-bg: #f0f9ff;
  --status-ordered-text: #0069a8;
  --status-draft-bg: #f4f4f5;
  --status-draft-text: #52525c;
  --status-received-bg: #ecfdf5;
  --status-received-text: #007a55;
  --status-backordered-bg: #fffbeb;
  --status-backordered-text: #bb4d00;

  /* Borders & separators */
  --header-border: rgba(0, 0, 0, 0.07);
  --sidebar-separator: rgba(255, 255, 255, 0.06);
  --active-nav-bg: rgba(255, 255, 255, 0.08);

  /* Radii */
  --radius-button: 3.25px;
  --radius-card: 9.25px;
  --radius-badge: 3.5px;

  /* Shadows */
  --shadow-button: 0px 1px 1.5px rgba(0, 0, 0, 0.1), 0px 1px 1px rgba(0, 0, 0, 0.1);
  --shadow-card: 0px 24px 64px rgba(0, 0, 0, 0.14), 0px 0px 0px 1px rgba(0, 0, 0, 0.07);

  /* Typography */
  --font-ui: 'Instrument Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-heading: 'Bricolage Grotesque', var(--font-ui);
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;

  /* Spacing */
  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-base: 16px;
  --spacing-md: 24px;
  --spacing-lg: 32px;

  /* Layout */
  --sidebar-width: 212px;
  --content-width: 962px;
}

/* Status badge utility classes */
.badge-ordered {
  background-color: var(--status-ordered-bg);
  color: var(--status-ordered-text);
}

.badge-draft {
  background-color: var(--status-draft-bg);
  color: var(--status-draft-text);
}

.badge-received {
  background-color: var(--status-received-bg);
  color: var(--status-received-text);
}

.badge-backordered {
  background-color: var(--status-backordered-bg);
  color: var(--status-backordered-text);
}

/* Cards */
.card {
  background: var(--secondary-bg);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
}

/* Buttons */
.btn-primary {
  background: var(--primary);
  color: var(--primary-text);
  border-radius: var(--radius-button);
  box-shadow: var(--shadow-button);
}

.btn-secondary {
  background: var(--secondary-bg);
  border: 1px solid var(--secondary-border);
  border-radius: var(--radius-button);
}