/* ---------------------------------------------------------------------------
 * Brapho design tokens.
 *
 * The :root blocks below are copied VERBATIM from the landing site
 * (brapho/website/tokens/*.css, mirrored in docs/brand/ for reference).
 * Do not edit them here: change the landing and re-copy.
 *
 * CRM-specific additions live at the bottom, under "CRM extensions", and are
 * derived exclusively from the scales above. Application CSS consumes the
 * semantic tokens only - never a raw hex value.
 * ------------------------------------------------------------------------- */

/* --- colors.css ---------------------------------------------------------- */
:root{
  /* Base — tinta */
  --ink-900:#12171D; --ink-800:#1C232B; --ink-600:#3A444F; --ink-400:#6B7581; --ink-300:#98A0AA;
  /* Base — papel */
  --paper-100:#FCFCFD; --paper-200:#F4F5F8; --paper-300:#E7E9EE; --paper-400:#D3D7DF;
  /* Crema original del brief, disponible como acento cálido puntual */
  --cream-200:#F2EDE1;
  /* Acentos */
  --rose-700:#8A2543; --rose-600:#AE3156; --rose-200:#E7C4CF; --rose-100:#F6E5EA;
  --violet-700:#463480; --violet-600:#5A439C; --violet-200:#CFC6E6; --violet-100:#EBE6F5;

  /* Semánticos — texto */
  --text-strong:var(--ink-900); --text-body:var(--ink-800); --text-muted:var(--ink-400);
  --text-inverse:var(--paper-200); --text-accent:var(--rose-600); --text-accent-alt:var(--violet-600);
  --text-link:var(--rose-600); --text-link-hover:var(--rose-700);

  /* Semánticos — superficies */
  --surface-page:var(--paper-100); --surface-raised:var(--paper-200); --surface-card:var(--paper-100);
  --surface-ink:var(--ink-800); --surface-accent:var(--rose-600); --surface-accent-alt:var(--violet-600);
  --surface-tint-rose:var(--rose-100); --surface-tint-violet:var(--violet-100);

  /* Semánticos — líneas */
  --line-hairline:var(--paper-400); --line-rule:var(--ink-800); --line-grid:#E1E4EA; --line-grid-inverse:rgba(252,252,253,.07);
  --node-primary:var(--rose-600); --node-secondary:var(--violet-600);

  /* Estados */
  --focus-ring:var(--violet-600);
}

/* --- typography.css ------------------------------------------------------ */
:root{
  --font-serif:"Gelasio",Georgia,"Times New Roman",serif;
  --font-sans:"IBM Plex Sans",system-ui,"Helvetica Neue",sans-serif;
  --font-mono:"IBM Plex Mono",ui-monospace,"SFMono-Regular",monospace;

  --weight-regular:400; --weight-medium:500; --weight-semibold:600; --weight-bold:700;

  --size-display:clamp(2.75rem,6vw,4.5rem);
  --size-h1:clamp(2.25rem,4.4vw,3.25rem);
  --size-h2:clamp(1.75rem,3vw,2.25rem);
  --size-h3:1.375rem;
  --size-body-lg:1.1875rem;
  --size-body:1rem;
  --size-small:0.875rem;
  --size-label:0.75rem;

  --leading-tight:1.08; --leading-snug:1.24; --leading-normal:1.62; --leading-loose:1.75;
  --tracking-display:-0.02em; --tracking-normal:0; --tracking-label:0.14em;

  /* Aliases de rol */
  --text-display-font:var(--font-serif);
  --text-heading-font:var(--font-serif);
  --text-body-font:var(--font-sans);
  --text-label-font:var(--font-mono);
}

/* --- spacing.css --------------------------------------------------------- */
:root{
  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-5:24px;
  --space-6:32px; --space-7:48px; --space-8:64px; --space-9:96px; --space-10:144px;

  --gutter:var(--space-5);
  --section-y:var(--space-9);
  --stack-tight:var(--space-3);
  --stack:var(--space-5);
  --measure:64ch;
  --measure-narrow:46ch;
  --container:1180px;
  --container-narrow:760px;
}

/* --- surfaces.css -------------------------------------------------------- */
:root{
  --radius-none:0px; --radius-sm:2px; --radius-md:3px; --radius-pill:999px;
  --border-hairline:1px solid var(--line-hairline);
  --border-ink:1.5px solid var(--line-rule);
  --border-ink-heavy:2px solid var(--line-rule);
  --rule-weight:1.5px;
  --node-size:10px;

  /* Sin sombras difusas: el sistema usa desplazamiento sólido tipo sello */
  --shadow-none:none;
  --shadow-stamp:3px 3px 0 var(--paper-400);
  --shadow-stamp-ink:4px 4px 0 var(--ink-800);
  --shadow-inset-hairline:inset 0 0 0 1px var(--line-hairline);

  /* Retícula de cuaderno */
  --grid-size:24px;
  --grid-paper:repeating-linear-gradient(to right,var(--line-grid) 0 1px,transparent 1px var(--grid-size)),repeating-linear-gradient(to bottom,var(--line-grid) 0 1px,transparent 1px var(--grid-size));
  --grid-paper-inverse:repeating-linear-gradient(to right,var(--line-grid-inverse) 0 1px,transparent 1px var(--grid-size)),repeating-linear-gradient(to bottom,var(--line-grid-inverse) 0 1px,transparent 1px var(--grid-size));
}

/* --- motion.css ---------------------------------------------------------- */
:root{
  --ease-standard:cubic-bezier(.2,.6,.3,1);
  --ease-out:cubic-bezier(0,.6,.35,1);
  --dur-fast:120ms;
  --dur-base:180ms;
  --dur-slow:320ms;
  --dur-reveal:700ms;
  --dur-draw:900ms;
  --transition-ui:color var(--dur-fast) var(--ease-standard),background-color var(--dur-fast) var(--ease-standard),border-color var(--dur-fast) var(--ease-standard),box-shadow var(--dur-fast) var(--ease-standard),transform var(--dur-fast) var(--ease-standard);
}

/* ===========================================================================
 * CRM extensions
 *
 * Tokens the application needs and the landing does not define. Every value
 * is derived from the scales above so the CRM reads as the same system.
 * ========================================================================= */
:root{
  /* Status scale. Danger leans on the rose family so alerts stay in palette;
     success and warning are muted, editorial tones - not signal-light hues. */
  --green-700:#1F5D46; --green-100:#E3EFE9;
  --amber-700:#7A5314; --amber-100:#F5EBD9;

  --state-success:var(--green-700);
  --state-success-tint:var(--green-100);
  --state-warning:var(--amber-700);
  --state-warning-tint:var(--amber-100);
  --state-danger:var(--rose-700);
  --state-danger-tint:var(--rose-100);

  /* Pipeline outcome surfaces: a soft win tint, a drained loss tint. */
  --surface-won:var(--green-100);
  --surface-lost:var(--paper-300);

  /* Application chrome. */
  --surface-sidebar:var(--ink-900);
  --surface-topbar:var(--paper-100);
  --surface-hover:var(--paper-200);
  --surface-column:var(--paper-200);

  /* The app speaks in a rounder, friendlier voice than the landing:
     one humanist sans for text, headings and numbers; mono only for codes. */
  --font-sans:"Plus Jakarta Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --font-serif:var(--font-sans);
  --radius-card:16px;
  --radius-control:10px;

  /* App canvas one step darker than cards, so panels read as panels. */
  --surface-app:var(--paper-200);
  --shadow-soft:0 1px 2px rgba(18,23,29,.05),0 1px 1px rgba(18,23,29,.03);
  --shadow-raise:0 6px 18px rgba(18,23,29,.08);

  /* Fixed layout metrics. */
  --sidebar-w:232px;
  --topbar-h:60px;
}