/* HOC SME design tokens. Every colour, size and spacing value used by the UI comes from here.
   Change a token and the whole product follows. Do not hardcode values in components or pages. */

@font-face { font-family: "Poppins"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("../fonts/poppins-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("../fonts/poppins-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("../fonts/poppins-latin-600-normal.woff2") format("woff2"); }

:root {
  color-scheme: light;

  /* Typography */
  --font-sans: "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --text-page-title: 1.5rem;     /* 24px  page title */
  --text-section: 1.125rem;      /* 18px  section heading */
  --text-sub: 0.9375rem;         /* 15px  subheading / body */
  --text-base: 0.9375rem;        /* 15px  body */
  --text-table: 0.875rem;        /* 14px  table text */
  --text-sm: 0.8125rem;          /* 13px  labels, supporting text */
  --text-xs: 0.75rem;            /* 12px  status text (badges only) */
  --text-figure-lg: 1.5rem;
  --text-figure-xl: 2.25rem;     /* the one number that must dominate: the sale total */
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;

  /* Colour: neutrals */
  --bg: #F5F7F6;
  --surface: #FFFFFF;
  --surface-muted: #F0F3F1;
  --border: #E1E6E3;
  --border-strong: #C6CEC9;
  --text: #17211D;
  --text-muted: #5C6963;
  --placeholder: #75817B;
  --text-disabled: #8A958F;

  /* Colour: primary ("ledger green") */
  --primary: #0D6B57;
  --primary-hover: #0A5645;
  --primary-active: #084437;
  --primary-soft: #E6F2EE;
  --primary-soft-border: #BBDBD1;
  --primary-ring: rgba(13, 107, 87, 0.28);
  --on-primary: #FFFFFF;

  /* Colour: meaning (each has solid, soft background, border and readable text) */
  --success: #1B7F4B;  --success-bg: #E8F5EE;  --success-border: #BFE3CE;  --success-text: #14633A;
  --warning: #A15C07;  --warning-bg: #FDF3E1;  --warning-border: #F0D9A8;  --warning-text: #7A4504;
  --danger:  #B42318;  --danger-bg:  #FDECEA;  --danger-border:  #F3C1BC;  --danger-text:  #912018;
  --info:    #1F5A99;  --info-bg:    #E8F0FA;  --info-border:    #BDD3EE;  --info-text:    #174A82;
  --danger-ring: rgba(180, 35, 24, 0.25);

  /* Spacing (4px base) */
  --space-1: 0.25rem;  --space-2: 0.5rem;   --space-3: 0.75rem;  --space-4: 1rem;
  --space-5: 1.25rem;  --space-6: 1.5rem;   --space-8: 2rem;     --space-10: 2.5rem;  --space-12: 3rem;

  /* Shape and elevation: restrained */
  --radius-sm: 4px;
  --radius: 6px;
  --radius-lg: 10px;           /* modals only */
  --shadow-sm: 0 1px 2px rgba(23, 33, 29, 0.06);
  --shadow-md: 0 4px 14px rgba(23, 33, 29, 0.10);
  --shadow-lg: 0 14px 36px rgba(23, 33, 29, 0.18);

  /* Controls (touch friendly) */
  --control-h: 2.5rem;         /* 40px */
  --control-h-sm: 2.125rem;    /* 34px: dense secondary actions only */
  --control-h-lg: 3rem;        /* 48px: POS and primary touch actions */

  /* Motion */
  --ease: cubic-bezier(0.2, 0, 0, 1);
  --dur-fast: 120ms;
  --dur: 180ms;

  /* Layers */
  --z-sticky: 10;
  --z-dropdown: 50;
  --z-modal: 100;
  --z-toast: 200;
}