/* ==========================================================================
   SMC DESIGN SYSTEM TOKENS - 100% FIGMA ORIGINAL
   Trích xuất trực tiếp từ vector paths của SMC_Design_System__Copy_-2.pdf
   ========================================================================== */

:root {
  /* Brand & Direction Status - Exact PDF Hex */
  --color-primary: #DB072B;          /* Đỏ cờ VinFast chuẩn PDF */
  --color-primary-hover: #BD113B;
  --color-primary-light: #FEE2E2;
  --color-primary-border: #DB072B;

  --color-direction-in: #037756;     /* Xanh lục bảo chiều vào chuẩn PDF */
  --color-direction-in-bg: #D1F9E4;  /* Nền badge xanh chuẩn PDF */
  --color-direction-out: #DB072B;    /* Đỏ chiều ra chuẩn PDF */
  --color-direction-out-bg: #FEE2E2;

  --color-warning: #E9B308;          /* Vàng cảnh báo đối soát chuẩn PDF */
  --color-warning-light: #FEF3C7;

  /* Surfaces & Neutrals - Exact PDF Hex */
  --bg-page: #F4F4F6;
  --bg-surface: #FFFFFF;
  --bg-surface-secondary: #F4F4F4;
  --bg-camera-panel: #010516;
  --bg-camera-inner: #08080A;

  /* Borders */
  --border-light: #E4E4E6;
  --border-medium: #D4D4D8;
  --border-active: #DB072B;

  /* Text Colors - Exact PDF Hex */
  --text-main: #0A0A0A;
  --text-secondary: #52525B;
  --text-muted: #707079;
  --text-light: #A1A1AA;
  --text-white: #FFFFFF;

  /* Fonts */
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;

  /* Radii */
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;
  --radius-full: 9999px;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-family: var(--font-sans);
}

body {
  background-color: var(--bg-page);
  color: var(--text-main);
  font-size: 13px;
  line-height: 1.4;
  height: 100vh;
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
}

/* Button Component */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 6px 14px;
  font-size: 13px;
  font-weight: 600;
  border-radius: var(--radius-sm);
  cursor: pointer;
  border: 1px solid transparent;
  transition: all 0.15s ease;
  white-space: nowrap;
}

.btn-primary {
  background-color: var(--color-primary);
  color: #FFFFFF;
}
.btn-primary:hover {
  background-color: var(--color-primary-hover);
}

.btn-secondary {
  background-color: #FFFFFF;
  border: 1px solid var(--border-medium);
  color: var(--text-main);
}
.btn-secondary:hover {
  background-color: var(--bg-surface-secondary);
}

.btn-disabled {
  background-color: #E4E4E6;
  color: #A1A1AA;
  cursor: not-allowed;
  border-color: #E4E4E6;
}

/* Badges */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  font-size: 11px;
  font-weight: 700;
  border-radius: var(--radius-full);
}
.badge-in {
  background-color: var(--color-direction-in-bg);
  color: var(--color-direction-in);
}
.badge-out {
  background-color: var(--color-direction-out-bg);
  color: var(--color-direction-out);
}
.badge-warning {
  background-color: var(--color-warning-light);
  color: #854D0E;
}