/*
  theme.css — every visual decision lives here as a CSS variable.
  Change the look of the whole system by editing these values only.
  app.css uses these variables through semantic class names.
*/
:root {
  /* Typography */
  --font-family: "IBM Plex Sans Arabic", "Segoe UI", Tahoma, sans-serif;
  --font-size-base: 15px;
  --font-size-sm: 13px;
  --font-size-xs: 12px;
  --font-size-lg: 17px;
  --font-size-xl: 22px;
  --font-size-title: 26px;
  --font-size-amount: 32px;
  --font-size-scan: 20px;
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-bold: 700;

  /* Neutral colors */
  --color-bg: #f2f3f5;
  --color-surface: #ffffff;
  --color-surface-muted: #f7f8fa;
  --color-border: #e3e5e9;
  --color-border-strong: #c9ccd2;
  --color-text: #161a22;
  --color-text-muted: #5f6672;
  --color-text-faint: #8a909b;

  /* Brand / actions */
  --color-primary: #0e6b56;
  --color-primary-hover: #0b5847;
  --color-primary-soft: #e3f1ec;
  --color-on-primary: #ffffff;
  --color-dark: #1f2937;
  --color-on-dark: #ffffff;

  /* Status colors */
  --color-success: #15803d;
  --color-success-soft: #dcfce7;
  --color-success-border: #22a35a;
  --color-danger: #b91c1c;
  --color-danger-soft: #fdeeee;
  --color-danger-border: #f2a3a3;
  --color-warning: #8a5a00;
  --color-warning-soft: #fff8e1;
  --color-warning-border: #f0b43c;
  --color-info: #1e40af;
  --color-info-soft: #eef4ff;
  --color-info-border: #bcd0f7;
  --color-discount: #9a3412;
  --color-discount-soft: #fff4ea;
  --color-discount-border: #f8c9a0;

  /* Area accents */
  --color-sales-manager: #9a3412;
  --color-sales-manager-soft: #fff4ea;
  --color-finance: #86198f;
  --color-finance-soft: #fdf2fd;
  --color-admin: #1f2937;

  /* Test mode */
  --color-test: #5b21b6;
  --color-test-soft: #f3efff;
  --color-test-border: #c4b5fd;
  --color-on-test: #ffffff;

  /* Shape & spacing */
  --radius-sm: 6px;
  --radius: 10px;
  --radius-lg: 14px;
  --radius-pill: 999px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --page-max-width: 1240px;
  --header-height: 64px;
  --control-height: 44px;
  --control-height-big: 56px;
  --shadow-card: 0 1px 2px rgba(16, 24, 40, 0.04);
  --focus-ring: 0 0 0 3px rgba(14, 107, 86, 0.25);

  /* Print */
  --label-width: 50mm;
  --label-height: 30mm;
}