/* DocuMaaS design tokens and base controls: the single source for documaas.com, the dashboard, the legal pages and
 * the PDFs (design-language.md). Copied into each site at build time; do not edit the copies.
 * Paper and ink. Square corners everywhere; the only rounded shapes are status dots (the sticker accent was
 * retired 2026-10-06). One-pixel hairlines, no shadows. Checked by tools/design/check.mjs. */
:root {
  --paper: #FAF8F3;
  --ink: #14213D;
  --ink-soft: #5B6478;
  --line: #E3DED3;
  --field: #FFFFFF;
  --tint: #F1EDE3;          /* quiet blocks: notes, commands */
  --vigente: #2E7D4F;       /* in force; primary action */
  --por-vencer-dot: #B47B18;
  --por-vencer-text: #8A5A0B;
  --vencido: #9B2C2C;       /* product only: expired, errors */
  --placeholder: #8A8F9C;
  --radius: 0;              /* every control, frame and block */
  --hairline: 1px solid var(--line);
  --rule: 1px solid var(--ink);
  --font-sans: "IBM Plex Sans", system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, monospace;
  --font: var(--font-sans);
  --mono: var(--font-mono);
  --hairline-width: 1px;
  /* 8px base; lay out with gap, not margins */
  --space-1: 8px; --space-1h: 12px; --space-2: 16px; --space-3: 24px; --space-4: 32px; --space-5: 40px; --space-6: 48px;
  --sidebar-width: 264px;   /* app shell sidebar; a drawer below 1024px */
  --content-max: 1200px;    /* main column beside the sidebar */
}
/* No dark mode: the product is paper for everyone. */
html { color-scheme: light; -webkit-text-size-adjust: 100%; }
* { box-sizing: border-box; }

/* Form controls: square, ink hairline, no native styling (iOS rounds native inputs and selects) */
input, select, textarea {
  font: inherit; font-size: 16px; color: var(--ink); background: var(--field);
  border: var(--rule); border-radius: var(--radius); -webkit-appearance: none; appearance: none;
}
input, select { height: 48px; padding: 0 14px; }
textarea { padding: 12px 14px; }
select {
  padding-right: 40px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%2314213D' stroke-width='1.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center;
}
input::placeholder { color: var(--placeholder); }
input[type="checkbox"] { width: 16px; height: 16px; padding: 0; border: var(--rule); background: var(--field); flex: none; }
input[type="checkbox"]:checked { background: var(--ink) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6.5l2.5 2.5 4.5-6' fill='none' stroke='%23FAF8F3' stroke-width='1.8'/%3E%3C/svg%3E") center no-repeat; }
input:focus, select:focus, textarea:focus, button:focus-visible, a:focus-visible { outline: 2px solid var(--ink); outline-offset: 1px; }

/* Buttons: square. Primary = green (an action that moves a document forward), secondary = ink outline. */
.btn { font: inherit; font-size: 15px; font-weight: 500; height: 44px; padding: 0 20px; border-radius: var(--radius); cursor: pointer;
  border: 1px solid var(--ink); background: transparent; color: var(--ink); display: inline-flex; align-items: center; gap: 8px; }
.btn.primary { background: var(--vigente); border-color: var(--vigente); color: var(--paper); }
.btn.ink { background: var(--ink); color: var(--paper); }
.btn.lg { height: 52px; padding: 0 28px; font-size: 16px; }  /* the landing call to action only */
.btn.sm { height: 36px; padding: 0 14px; font-size: 14px; }  /* row actions: queue, findings, strip */
.btn:disabled { opacity: .45; cursor: default; }

/* Status: a dot plus a word, in the status colour; never a filled badge */
.dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; }