/*
 * Design tokens. Source of truth: canvas board "01 · Guia de estilo e componentes"
 * (snapshot: design/canvas/Estilo.dc.html, export: docs/spec/style-guide.md).
 * Never hard-code a color, radius or shadow in templates: use these variables.
 * Changing a value here requires the same change on the canvas first.
 */
:root {
  /* Colors */
  --brand: #4a2420;        /* primary actions, app top bar */
  --ink: #2a1a17;          /* main text */
  --ink-2: #4f3f38;        /* strong secondary text */
  --muted: #6e5d55;        /* captions, labels */
  --on-brand: #ffffff;
  --on-brand-2: #eadbcf;   /* subtitle on brand */
  --brand-line: #7a4c45;   /* borders of buttons placed on brand (logout, header actions) */
  --bg: #f6f2ec;
  --surface: #ffffff;
  --surface-2: #efe6dd;    /* summaries, closed periods */
  --line: #e4dbd1;
  --line-2: #efe8e0;
  --border: #cdbfb2;       /* inputs, secondary buttons */
  --accent: #f2be1a;       /* deadline, current step, last step. Always with brown text */
  --accent-soft: #fcefc4;
  --accent-border: #e9c86a;
  --danger: #a1221f;       /* pending, error, holiday, urgent */
  --danger-text: #8e1b1b;
  --danger-soft: #fbe3df;
  --danger-border: #e8b4ad;
  --ok: #1e5a26;           /* only "Pedido feito" and confirmations */
  --ok-soft: #e1efdf;
  --ok-border: #a9cfa7;
  --switch-off: #bfb1a4;   /* toggle track when off (C-09) */
  --overlay-sheet: rgba(42, 26, 23, 0.45);  /* behind sheets (C-07) */
  --overlay-modal: rgba(42, 26, 23, 0.5);   /* behind modals (C-11) */

  /* Type */
  --font-sans: "IBM Plex Sans", system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, monospace;
  --fs-display: 44px;
  --fs-h1-panel: 28px;
  --fs-h1-app: 22px;
  --fs-h2-panel: 22px;
  --fs-card-title: 19px;
  --fs-body-app: 17px;     /* min 16px on inputs so iOS does not zoom */
  --fs-body-panel: 15px;
  --fs-small: 13px;
  --fs-label: 12px;        /* uppercase, 600, letter-spacing .06em */
  --lh-app: 1.45;
  --lh-panel: 1.5;
  --lh-title: 1.2;

  /* Space (4px base) */
  --sp-1: 4px;
  --sp-2: 6px;
  --sp-3: 8px;
  --sp-4: 10px;
  --sp-5: 12px;
  --sp-6: 14px;
  --sp-7: 16px;
  --sp-8: 20px;
  --sp-9: 24px;
  --sp-10: 32px;
  --sp-11: 48px;

  /* Radius */
  --r-chip: 6px;
  --r-field-panel: 8px;
  --r-button-app: 10px;
  --r-card: 14px;
  --r-sheet: 20px;
  --r-pill: 999px;

  /* Shadows (cards have none, only a border) */
  --shadow-menu: 0 10px 28px rgba(42, 26, 23, 0.16);
  --shadow-sheet: 0 -10px 30px rgba(42, 26, 23, 0.25);
  --shadow-filter: 0 1px 2px rgba(42, 26, 23, 0.18);

  /* Sizes */
  --btn-app: 52px;
  --btn-panel: 44px;
  --touch-min: 44px;
}