/* ==========================================================================
   variables.css
   Design tokens (CSS custom properties) for the EasyLoad Ops Console.
   Keep every raw color / font / spacing value here — nothing else in the
   project should hard-code a hex value or px size outside this file.
   ========================================================================== */

:root {
  /* ---- Brand colors ---------------------------------------------------- */
  --color-navy-900: #01193b;   /* primary dark navy (auth panel, headings) */
  --color-navy-800: #0a2347;
  --color-green-600: #129726;  /* primary brand green (buttons, accents) */
  --color-green-700: #0e7d1f;  /* hover/active state for green */
  --color-green-100: #e5f6e8;  /* faint green tint (badges, highlights) */

  /* ---- Neutrals ----------------------------------------------------------
     Used for backgrounds, borders, and body/placeholder text. */
  --color-white: #ffffff;
  --color-bg-page: #f5f7fa;    /* app / page background */
  --color-bg-card: #ffffff;    /* card & input surfaces */
  --color-border: #e2e5ea;
  --color-border-strong: #cfd4dc;
  --color-text-primary: #0f1b2d;   /* body copy on light backgrounds */
  --color-text-secondary: #5b6472; /* muted / helper text */
  --color-text-placeholder: #9aa3b2;
  --color-text-on-dark: #ffffff;
  --color-text-on-dark-muted: #c3cbdc;
  --color-link: #2563eb;

  /* ---- Feedback / status (used across later pages: alerts, badges) ----- */
  --color-success: #129726;
  --color-warning: #d97706;
  --color-danger: #dc2626;
  --color-info: #2563eb;

  /* ---- Status pill / stat-card pairs -------------------------------------
     Each status has a pale "-bg" for chips/badges/icon circles and a
     saturated "-fg" for the icon/text on top of it. Sampled from the
     dashboard designs (stat cards, table pills). Purple has no plain
     --color-* counterpart above since it's only ever used in this pill
     form (the "No WhatsApp" stat), not as a general brand/feedback color. */
  --color-success-bg: #e9f6eb;
  --color-success-fg: #1f9d3d;
  --color-info-bg: #e8edfd;
  --color-info-fg: #2955d8;
  --color-warning-bg: #fef4e1;
  --color-warning-fg: #d97706;
  --color-info-border: #cfdcfb;   /* derived: a touch darker than --color-info-bg, for tinted-box borders */
  --color-warning-border: #fbdfa4; /* derived: a touch darker than --color-warning-bg, same use */
  --color-purple-bg: #f1eafd;
  --color-purple-fg: #7c3aed;
  --color-danger-bg: #fdecec;
  --color-neutral-bg: #eef0f3;
  --color-neutral-fg: #5b6472;

  /* ---- Typography -------------------------------------------------------
     Font stack falls back gracefully with no custom font required;
     drop files into /fonts and update --font-family-base to switch. */
  --font-family-base: "Manrope", "Inter", -apple-system, BlinkMacSystemFont,
    "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  --font-size-xs: 0.75rem;    /* 12px */
  --font-size-sm: 0.875rem;   /* 14px */
  --font-size-base: 1rem;     /* 16px */
  --font-size-md: 1.0625rem;  /* 17px */
  --font-size-lg: 1.25rem;    /* 20px */
  --font-size-xl: 1.75rem;    /* 28px */
  --font-size-2xl: 2.25rem;   /* 36px */

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

  --line-height-tight: 1.2;
  --line-height-base: 1.5;

  /* ---- Spacing scale ------------------------------------------------- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 2.5rem;
  --space-8: 3rem;
  --space-9: 4rem;

  /* ---- Radius / shadow / borders -------------------------------------- */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-pill: 999px;

  --shadow-sm: 0 1px 2px rgba(15, 27, 45, 0.06);
  --shadow-md: 0 8px 24px rgba(15, 27, 45, 0.08);
  --shadow-lg: 0 20px 48px rgba(1, 25, 59, 0.14);

  --border-width: 1px;

  /* ---- Layout ----------------------------------------------------------- */
  --container-max: 1440px;
  --header-height: 72px;
  --sidebar-width: 264px;
  --transition-fast: 150ms ease;
  --transition-base: 220ms ease;
}