/* Colour, type and size for the whole app. Values come from the House of
   Supplements brand identity — see DESIGN.md, which is the source of truth
   for every number here. Nothing in here positions anything; app.css does that. */

/* Poppins for headings, never below 600. Inter for everything read, never
   above 600 — Google ships it as one variable file, hence the weight range. */
@font-face { font-family: Poppins; font-style: normal; font-weight: 600; font-display: swap; src: url(../fonts/poppins-600.woff2) format('woff2'); }
@font-face { font-family: Poppins; font-style: normal; font-weight: 700; font-display: swap; src: url(../fonts/poppins-700.woff2) format('woff2'); }
@font-face { font-family: Poppins; font-style: normal; font-weight: 800; font-display: swap; src: url(../fonts/poppins-800.woff2) format('woff2'); }
@font-face { font-family: Inter;   font-style: normal; font-weight: 400 600; font-display: swap; src: url(../fonts/inter-var.woff2) format('woff2'); }
/* Cairo carries Arabic at the same visual weight as Poppins, so a bilingual
   screen reads as one system; 400 for reading, 700 for headings and buttons. */
@font-face { font-family: Cairo; font-style: normal; font-weight: 400; font-display: swap; src: url(../fonts/cairo-400.woff2) format('woff2'); }
@font-face { font-family: Cairo; font-style: normal; font-weight: 700; font-display: swap; src: url(../fonts/cairo-700.woff2) format('woff2'); }

:root {
  /* Brand and danger are deliberately the same red. That is the constraint the
     palette is built around: red never labels a button you want pressed. */
  --brand: #D81F26;
  --danger: #D81F26;
  --danger-ink: #A5161C;
  --danger-bg: #FAE3E4;

  --primary: #334862;
  --primary-ink: #22303F;
  --primary-bg: #E4EAF1;

  --ok: #2F6E52;
  --ok-bg: #DDEBE3;
  --warn: #B45309;
  --warn-bg: #FFF8F0;

  --ink: #171717;
  --body: #454542;
  --muted: #6B6B6B;
  --surface: #FFFFFF;
  --page: #FAFAF8;
  --line: #E2E2DF;
  --line-soft: #ECECE9;

  /* Component-layer tokens: named by role, not by hue, so app.css never
     spells out a colour of its own. */
  --on-primary: #FFFFFF;
  --on-primary-soft: rgba(255, 255, 255, .22);
  --neutral-bg: #F1F1EE;
  --surface-alt: #F1F1EE;
  --hover-bg: #EDEDEA;
  --field-line: #D6D6D2;
  --btn-line: #D6D6D2;
  --line-strong: #B8B8B3;
  --danger-line: #F0C6C8;
  --ok-line: #BFD9CB;
  --ok-soft: #F0F7F3;

  --font: Inter, 'Segoe UI', system-ui, sans-serif;
  --font-display: Poppins, 'Segoe UI', system-ui, sans-serif;
  --t-page: 26px;
  --t-section: 20px;
  --t-body: 16px;
  --t-label: 11.5px;
  --t-title: 18px;
  --t-small: 13px;

  /* Office density is the default — the other two override these four. */
  --control-h: 44px;
  --btn-font: 15px;
  --gap: 12px;
  --radius: 8px;
}

/* The packing station: read at arm's length, pressed without aiming. */
[data-density="station"] {
  --t-body: 17px;
  --control-h: 60px;
  --btn-font: 19px;
  --gap: 14px;
  --radius: 10px;
}

/* The van: one hand, in motion, in the sun. No screen uses this yet — the
   driver flow is a later sub-project, and defining it here is what stops that
   flow inventing a fourth vocabulary. */
[data-density="van"] {
  --t-body: 17px;
  --control-h: 72px;
  --btn-font: 22px;
  --gap: 14px;
  --radius: 14px;
}

/* Cairo carries the Arabic; Lato stays behind it for the Latin that remains
   inside Arabic screens — order numbers, tracking numbers, SKUs — so those keep
   the same figures as the rest of the app rather than changing shape with the
   language. */
[lang="ar"] {
  --font: Cairo, Inter, 'Segoe UI', system-ui, sans-serif;
  --font-display: Cairo, Poppins, 'Segoe UI', system-ui, sans-serif;
}