/* tokens.css — biến thiết kế mà styles.css dùng (thay cho token của Claude Dashboard).
   Đổi màu / cỡ chữ / khoảng cách tại đây. */
:root {
  --font-anthropic-sans: "Be Vietnam Pro", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --font-anthropic-serif: "Be Vietnam Pro", system-ui, sans-serif;

  /* Thương hiệu GRGR */
  --g-blue: #004AAD;
  --g-blue2: #2A6FCC;
  --g-blue3: #5A95E3;
  --g-blue4: #8DB8F0;
  --g-cyan: #00B0F0;
  --g-soft: color-mix(in srgb, #2A6FCC 12%, transparent);
  --g-soft2: color-mix(in srgb, #2A6FCC 6%, transparent);

  /* màu nền / chữ */
  --color-fg: #0B1F33;
  --color-fg-muted: #5A6678;
  --color-bg: #F4F7FB;
  --color-panel: #FFFFFF;
  --color-border-line: #E3E8EF;
  --color-ok: #1E9E55;
  --color-warn: #C47A00;
  --color-bad: #D93A2F;

  /* cỡ chữ */
  --cds-font-size-caption: 12px;
  --cds-font-size-body: 14px;
  --cds-font-size-heading: 16px;
  --cds-font-size-title: 28px;
  --cds-font-weight-medium: 600;

  /* khoảng cách */
  --cds-gap-xs: 4px; --cds-gap-sm: 8px; --cds-gap-md: 16px; --cds-gap-lg: 24px; --cds-gap-xl: 32px;
  --cds-pad-xs: 4px; --cds-pad-sm: 8px; --cds-pad-md: 12px; --cds-pad-lg: 20px; --cds-pad-xl: 28px;
  --cds-radius: 8px;

  /* biểu đồ / popover */
  --cds-chart-grid: #E3E8EF;
  --cds-chart-muted: #C5CDD8;
  --cds-chart-axis: #B9C3D1;
  --cds-surface-popover: #FFFFFF;
  --cds-border: #E3E8EF;
  --cds-shadow-popover: 0 8px 24px rgba(11, 31, 51, .14);
  --cds-text-secondary: #5A6678;
  --cds-dur-slow: 300ms;
}
[hidden] { display: none !important; }
html { background: var(--color-bg); }
body { margin: 0; background: var(--color-bg); color: var(--color-fg); font-family: var(--font-anthropic-sans); font-size: 14px; }
#app { padding: clamp(16px, 3vw, 40px); padding-left: max(clamp(16px, 3vw, 40px), env(safe-area-inset-left, 0px)); padding-right: max(clamp(16px, 3vw, 40px), env(safe-area-inset-right, 0px)); }