/* ============================================================
   Boxme OMS — Design Tokens
   Single source of truth for color, type, spacing, radius, shadow.
   ============================================================ */

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

:root {
  /* ----- Color: brand ----- */
  --bx-primary: #0b43ea;        /* Boxme Blue */
  --bx-primary-hover: #093ad1;
  --bx-primary-active: #155dfc;
  --bx-link: #2b7fff;
  --bx-link-hover: #155dfc;

  /* ----- Color: surfaces ----- */
  --bx-page-bg: #ececec;
  --bx-card-bg: #ffffff;
  --bx-surface-2: #f5f5f5;      /* inset / table header / secondary fill */
  --bx-scrim: rgba(15, 23, 42, 0.45);

  /* ----- Color: text ----- */
  --bx-text-heading: #101828;
  --bx-text-dark: #030f26;
  --bx-text-body: #4a4a4a;
  --bx-text-muted: #99a1af;
  --bx-text-on-primary: #ffffff;

  /* ----- Color: borders ----- */
  --bx-border: #d6d3d1;
  --bx-border-muted: #e5e5e5;
  --bx-border-strong: #030f26;

  /* ----- Color: semantic ----- */
  --bx-success: #00af4e;
  --bx-success-bg: #f0fdf4;

  --bx-warning: #ffd230;
  --bx-warning-bg: #fefce8;
  --bx-warning-fg: #92400e;

  --bx-error: #fb2c36;
  --bx-error-bg: #fef2f2;

  --bx-orange: #ff6467;
  --bx-orange-bg: #fff7ed;
  --bx-orange-fg: #9a3412;

  /* ----- Type: families ----- */
  --bx-font-sans: 'Inter', 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --bx-font-mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, monospace;

  /* ----- Type: scale ----- */
  --bx-size-body: 13.28px;      /* base */
  --bx-size-h1: 24px;
  --bx-size-h2: 18px;
  --bx-size-h3: 14px;
  --bx-size-label: 13px;
  --bx-size-muted: 12px;
  --bx-size-micro: 11px;

  --bx-weight-regular: 400;
  --bx-weight-medium: 500;
  --bx-weight-semibold: 600;
  --bx-weight-bold: 700;

  --bx-leading-tight: 1.25;
  --bx-leading-normal: 1.5;
  --bx-leading-relaxed: 1.625;

  /* ----- Spacing (4px base) ----- */
  --bx-space-1: 4px;
  --bx-space-2: 8px;
  --bx-space-3: 12px;
  --bx-space-4: 16px;
  --bx-space-5: 20px;
  --bx-space-6: 24px;
  --bx-space-8: 32px;
  --bx-space-10: 40px;

  /* ----- Radius ----- */
  --bx-radius-sm: 6px;
  --bx-radius-md: 10px;          /* buttons, inputs */
  --bx-radius-lg: 13px;          /* cards */
  --bx-radius-pill: 9999px;

  /* ----- Shadow ----- */
  --bx-shadow-card: 0 1px 3px rgba(0, 0, 0, 0.08);
  --bx-shadow-pop: 0 8px 24px rgba(0, 0, 0, 0.12);
  --bx-shadow-pill: 0 1px 2px rgba(0, 0, 0, 0.06);

  /* ----- Sizes ----- */
  --bx-sidebar-w: 200px;
  --bx-topbar-h: 56px;
  --bx-btn-h: 40px;
  --bx-btn-h-sm: 33px;
  --bx-input-h: 40px;
  --bx-row-h: 44px;
  --bx-toggle-w: 35px;
  --bx-toggle-h: 20px;

  /* ----- Motion ----- */
  --bx-ease: cubic-bezier(.2, .7, .3, 1);
  --bx-dur-fast: 120ms;
  --bx-dur: 150ms;
}

/* ============================================================
   Semantic element styles
   ============================================================ */

html, body {
  font-family: var(--bx-font-sans);
  font-size: var(--bx-size-body);
  line-height: var(--bx-leading-normal);
  color: var(--bx-text-body);
  background: var(--bx-page-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, .bx-h1 {
  font-size: var(--bx-size-h1);
  font-weight: var(--bx-weight-semibold);
  line-height: var(--bx-leading-tight);
  color: var(--bx-text-heading);
  letter-spacing: -0.01em;
  margin: 0;
}

h2, .bx-h2 {
  font-size: var(--bx-size-h2);
  font-weight: var(--bx-weight-semibold);
  line-height: var(--bx-leading-tight);
  color: var(--bx-text-heading);
  margin: 0;
}

h3, .bx-h3 {
  font-size: var(--bx-size-h3);
  font-weight: var(--bx-weight-semibold);
  line-height: var(--bx-leading-tight);
  color: var(--bx-text-heading);
  margin: 0;
}

.bx-label {
  font-size: var(--bx-size-label);
  font-weight: var(--bx-weight-medium);
  color: var(--bx-text-dark);
}

.bx-muted {
  font-size: var(--bx-size-muted);
  font-weight: var(--bx-weight-regular);
  color: var(--bx-text-muted);
}

.bx-mono { font-family: var(--bx-font-mono); font-variant-numeric: tabular-nums; }

a { color: var(--bx-link); text-decoration: none; }
a:hover { color: var(--bx-link-hover); text-decoration: underline; }

/* Vietnamese-over-English label pattern */
.bx-sublabel {
  display: block;
  font-size: var(--bx-size-muted);
  font-weight: var(--bx-weight-regular);
  color: var(--bx-text-muted);
  margin-top: 2px;
}