/* =============================================================
   XTORY DESIGN TOKENS — canonical CSS variables
   Canon: April 2026 · v0.2
   Source of truth. Every new material imports this file.
   Do not hard-code hex values, font stacks, or spacing in
   surface code — reach for a token instead.
   ============================================================= */

:root {

  /* ---------- COLOR ---------- */

  /* Signal — the red that carries clinical urgency. Never decorative. */
  --xt-signal:        #8b1a1a;
  --xt-signal-soft:   #b84444;
  --xt-signal-800:    #701414;
  --xt-signal-600:    #a33030;
  --xt-signal-100:    #f6ecec;

  /* Paper — three warmths. Signal-on-paper is the canonical contrast. */
  --xt-paper:         #f6f4ee;
  --xt-paper-soft:    #eceae2;
  --xt-paper-deep:    #e2dfd4;
  --xt-paper-warm:    #f4f3ed;
  --xt-paper-bright:  #fafaf7;

  /* Ink — four weights of black. Ink is never pure #000. */
  --xt-ink:           #1a1a1a;
  --xt-ink-soft:      #3a3a3a;
  --xt-ink-faint:     #8a8a86;
  --xt-ink-mute:      #9a9a96;

  /* Rule — hairlines and borders */
  --xt-rule:          #c8c6be;
  --xt-rule-soft:     #e8e8e4;

  /* Utility */
  --xt-code-bg:       #f0efeb;
  --xt-success:       #2e7d32;
  --xt-success-bg:    #e4f5e4;
  --xt-warn:          #b88a1a;
  --xt-warn-bg:       #fff3d6;
  --xt-info:          #1e56b8;
  --xt-info-bg:       #e6efff;
  --xt-alt:           #4a6fa5;
  --xt-alt-bg:        #eef3fa;

  /* WhatsApp */
  --xt-whatsapp:      #25d366;
  --xt-whatsapp-dark: #1da851;

  /* Overlays — ink at various opacities (use instead of inline rgba) */
  --xt-overlay-xs:  rgba(26, 26, 26, 0.06);
  --xt-overlay-sm:  rgba(26, 26, 26, 0.10);
  --xt-overlay-md:  rgba(26, 26, 26, 0.12);

  /* Signal overlays — red tones for crisis / alert contexts */
  --xt-signal-border: rgba(139, 26, 26, 0.25);

  /* Elevation shadows — use instead of inline rgba box-shadows */
  --xt-shadow-xs:  0 1px 3px rgba(0, 0, 0, 0.06);
  --xt-shadow-sm:  0 1px 4px rgba(0, 0, 0, 0.06);
  --xt-shadow-md:  0 2px 8px rgba(0, 0, 0, 0.12);


  /* ---------- TYPOGRAPHY ---------- */

  --xt-font-sans:   "Space Grotesk", -apple-system, "Segoe UI", sans-serif;
  --xt-font-mono:   "Space Mono", ui-monospace, "Menlo", monospace;
  --xt-font-serif:  "Iowan Old Style", "Hoefler Text", Georgia, serif;

  --xt-text-xs:     0.72rem;
  --xt-text-sm:     0.85rem;
  --xt-text-base:   1rem;
  --xt-text-lg:     1.1rem;
  --xt-text-xl:     1.55rem;
  --xt-text-2xl:    2.3rem;
  --xt-text-hero:   4rem;

  --xt-tracking-tight:    -0.02em;
  --xt-tracking-normal:   0;
  --xt-tracking-wide:     0.08em;
  --xt-tracking-caps:     0.15em;
  --xt-tracking-caps-lg:  0.28em;

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


  /* ---------- SPACE (4 px grid) ---------- */

  --xt-space-1:   0.25rem;
  --xt-space-2:   0.5rem;
  --xt-space-3:   0.75rem;
  --xt-space-4:   1rem;
  --xt-space-5:   1.25rem;
  --xt-space-6:   1.5rem;
  --xt-space-8:   2rem;
  --xt-space-10:  2.5rem;
  --xt-space-12:  3rem;
  --xt-space-16:  4rem;


  /* ---------- RADII ---------- */

  --xt-radius-sm:   3px;
  --xt-radius-md:   6px;
  --xt-radius-lg:   12px;
  --xt-radius-xl:   20px;
  --xt-radius-pill: 999px;


  /* ---------- MOTION ---------- */

  --xt-ease-out:      cubic-bezier(0.22, 0.61, 0.36, 1);
  --xt-ease-in-out:   cubic-bezier(0.65, 0, 0.35, 1);
  --xt-dur-fast:      150ms;
  --xt-dur-base:      280ms;
  --xt-dur-slow:      600ms;
}