/* ============================================================================
   CP USA — Project module design tokens
   SINGLE SOURCE OF TRUTH for all styling. Reference these vars everywhere.
   Do NOT hard-code colors/spacing per screen. Do NOT re-decide styling.
   These mirror Digit's shell so the iframe looks native.
   ============================================================================ */

:root {
  /* ---- Typography -------------------------------------------------------- */
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    Helvetica, Arial, sans-serif;
  --fs-xs: 11px;
  --fs-sm: 12px;
  --fs-base: 13px;
  --fs-md: 14px;
  --fs-lg: 16px;
  --fs-xl: 20px;
  --fs-2xl: 24px;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --lh-tight: 1.25;
  --lh-base: 1.45;
  --tracking-tight: -0.01em;

  /* ---- Core colors ------------------------------------------------------- */
  /* Matched to Digit's ag-Grid table theme (.ag-theme-params-2, extracted from
     the saved ref/ page): a WARM "stone" neutral scale, not cool zinc. */
  --color-bg: #ffffff;
  --color-canvas: #fafaf9;      /* stone-50 page canvas behind the detail card */
  --color-text: #0c0a09;        /* stone-950 — Digit foreground-color rgba(12,10,9) */
  --color-label: #78716c;       /* stone-500 labels / secondary text */
  --color-muted: #a8a29e;       /* stone-400 placeholder / "None" empties */
  --color-border: #e7e5e4;      /* stone-200 hairline borders */
  --color-border-faint: rgba(0, 0, 0, 0.05); /* Digit table row/col border (5% black) */
  --color-surface-alt: #f5f5f4; /* stone-100 — Digit selected-row background */
  --color-hover: #fafaf9;       /* stone-50 — Digit row-hover-color exactly */
  --color-danger-text: #dc2626; /* inline negative values (e.g. Gap -15) */

  /* ---- Buttons (matched to Digit's MUI buttons) -------------------------- */
  /* Primary = warm dark neutral (NOT the blue accent — Digit uses stone-700).
     Secondary = tonal soft-fill (faint gray, no visible border), NOT outlined. */
  --btn-primary-bg: #44403c;    /* stone-700 — Digit contained-button bg */
  --btn-primary-text: #ffffff;
  --btn-secondary-bg: var(--color-border-faint); /* rgba(0,0,0,0.05) tonal fill */
  --btn-secondary-border: transparent;
  --btn-secondary-text: #0c0a09;

  /* ---- Accent / links / toggles ------------------------------------------ */
  --color-accent: #2b7fff;      /* blue-500 — Digit accent-color rgba(43,127,255) */
  --color-accent-bright: #2b7fff; /* toggle-on — Digit uses accent for toggle-on */

  /* ---- Tabs (matched to Digit's MUI Tabs) -------------------------------- */
  --tab-active-color: #1c1917;   /* stone-900 — active tab text + indicator */
  --tab-inactive-color: #4d4944; /* warm gray — inactive tab text */
  --tab-indicator-height: 1px;   /* Digit MuiTabs-indicator height */

  /* ---- Status pills (soft bg + saturated text, fully rounded) ------------ */
  /* blue = in-progress / not paid / unfulfilled */
  --pill-blue-bg: #dbeafe;
  --pill-blue-text: #1d4ed8;
  /* gray = draft */
  --pill-gray-bg: #f1f1f3;
  --pill-gray-text: #52525b;
  /* green = done / available */
  --pill-green-bg: #dcfce7;
  --pill-green-text: #15803d;
  /* red = not done / unavailable */
  --pill-red-bg: #fee2e2;
  --pill-red-text: #b91c1c;
  /* amber = requested */
  --pill-amber-bg: #ffedd5;
  --pill-amber-text: #c2410c;
  /* yellow = partial */
  --pill-yellow-bg: #fef9c3;
  --pill-yellow-text: #a16207;
  /* violet = manufacturing orders / packing type (Digit-native accent) */
  --pill-violet-bg: #ede9fe;
  --pill-violet-text: #7f22fe; /* purple-600 — Digit secondary accent rgba(127,34,254) */

  /* ---- Info / beta banner ------------------------------------------------ */
  --banner-bg: #eff6ff;
  --banner-border: #bfdbfe;
  --banner-text: #0c0a09;
  --banner-link: #2b7fff;

  /* ---- Shape ------------------------------------------------------------- */
  --radius-input: 8px;   /* inputs/buttons — Digit uses 8px */
  --radius-card: 9px;    /* cards 8-10px */
  --radius-pill: 9999px; /* pills fully rounded */

  /* ---- Shadows (minimal, soft) ------------------------------------------- */
  --shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.04);
  --shadow-md: 0 4px 12px rgba(16, 24, 40, 0.08);

  /* ---- Density / spacing ------------------------------------------------- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --row-height: 36px;    /* table rows — Digit ag-Grid row-height/header-height */
  --control-height: 34px;
  --btn-height: 28px;    /* Digit MUI buttons are 28px tall */
  --icon-size: 16px;     /* line-style (lucide) icons */
  --doc-max-width: 1040px; /* centered detail document card width */
}