/* ==========================================================================
   XTORY DESIGN TOKENS — v0.2 · canon
   2026-04-27 · reconciled with deck v0.7 + identity v0.2 + dispatch v0.5
   Source of truth for all Xtory product UIs (CTX, cliniX, Xperts, etc).
   Import once at the global root.
   ========================================================================== */

:root {
  /* ============================================================
     COLORS
     ============================================================ */

  /* Signal — the authority red. Used for accent, ink-on-fire moments,
     numerals, italic <em> emphasis, link hover, primary CTAs. */
  --xt-signal:        #8b1a1a;
  --xt-signal-soft:   #b84444;  /* signal on ink backgrounds */
  --xt-signal-800:    #701414;
  --xt-signal-600:    #a33030;
  --xt-signal-100:    #f6ecec;

  /* Paper — warm editorial off-white. The default brand surface. */
  --xt-paper:         #f6f4ee;  /* primary paper */
  --xt-paper-soft:    #eceae2;  /* secondary sections, cards */
  --xt-paper-deep:    #e2dfd4;  /* tertiary, subtle inset */
  --xt-paper-warm:    #f4f3ed;  /* legacy alias — same family */

  /* Ink — deep neutral blacks for type and inverted surfaces. */
  --xt-ink:           #1a1a1a;  /* primary text, ink backgrounds */
  --xt-ink-soft:      #3a3a3a;  /* body paragraphs */
  --xt-ink-faint:     #8a8a86;  /* labels, meta-text, captions */
  --xt-ink-mute:      #b6b6b0;  /* disabled, subtle dividers on paper */

  /* Rules — divider lines. */
  --xt-rule:          #c8c6be;
  --xt-rule-soft:     #e0ddd5;

  /* Semantic UI states (use sparingly — Xtory prefers signal/ink). */
  --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;

  --xt-code-bg:       #f0efeb;

  /* Inverted surface aliases — when .ink-bg is applied, swap automatically. */
  --xt-on-ink-fg:        #f6f4ee;
  --xt-on-ink-faint:     rgba(246, 244, 238, 0.55);
  --xt-on-ink-rule:      rgba(246, 244, 238, 0.18);

  /* ============================================================
     TYPOGRAPHY
     ============================================================ */

  --xt-font-sans:  "Space Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --xt-font-mono:  "Space Mono", "SF Mono", ui-monospace, Menlo, Monaco, monospace;
  --xt-font-serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, "Hoefler Text", serif;

  /* Type scale. xs/sm/base/lg cover UI; xl+ cover editorial. */
  --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-3xl:    3.2rem;
  --xt-text-hero:   4rem;
  --xt-text-poster: 6.5rem;

  --xt-tracking-tight:    -0.025em;  /* hero, h1, h2 */
  --xt-tracking-normal:   0;
  --xt-tracking-wide:     0.08em;
  --xt-tracking-caps:     0.22em;    /* mono labels, eyebrows */
  --xt-tracking-caps-tight: 0.18em;  /* mono in tight contexts */

  --xt-weight-regular:  400;
  --xt-weight-medium:   500;  /* default for h1/hero in Space Grotesk */
  --xt-weight-semibold: 600;
  --xt-weight-bold:     700;

  --xt-line-tight:    1.04;   /* hero */
  --xt-line-snug:     1.15;   /* h1, h2 */
  --xt-line-base:     1.5;    /* body UI */
  --xt-line-relaxed:  1.55;   /* body editorial */

  /* ============================================================
     SPACE — 4px scale
     ============================================================ */
  --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;
  --xt-space-20:  5rem;
  --xt-space-24:  6rem;

  /* ============================================================
     RADIUS
     ============================================================ */
  --xt-radius-sm:    3px;
  --xt-radius-md:    6px;
  --xt-radius-lg:    12px;
  --xt-radius-xl:    20px;
  --xt-radius-full:  999px;

  /* ============================================================
     MOTION — see motion.css for the keyframes.
     ============================================================ */
  --xt-ease-out:        cubic-bezier(0.22, 0.61, 0.36, 1);   /* default, lifts */
  --xt-ease-in-out:     cubic-bezier(0.65, 0, 0.35, 1);
  --xt-ease-cinematic:  cubic-bezier(0.16, 0.84, 0.30, 1);   /* hero entrances */

  --xt-dur-instant:    100ms;
  --xt-dur-fast:       150ms;
  --xt-dur-base:       280ms;
  --xt-dur-slow:       600ms;
  --xt-dur-cinematic:  1200ms;
  --xt-dur-bar-grow:   2000ms;       /* the canon barGrow timing */

  /* ============================================================
     SHADOWS — use sparingly. Xtory prefers rules + ink, not depth.
     ============================================================ */
  --xt-shadow-subtle:  0 1px 2px rgba(26, 26, 26, 0.06);
  --xt-shadow-card:    0 2px 8px rgba(26, 26, 26, 0.08);
  --xt-shadow-lift:    0 8px 24px rgba(26, 26, 26, 0.10);

  /* ============================================================
     LAYOUT GRID — editorial canvas defaults.
     ============================================================ */
  --xt-content-narrow:  720px;
  --xt-content-base:    960px;
  --xt-content-wide:    1200px;
  --xt-page-pad-x:      72px;        /* deck/editorial */
  --xt-page-pad-y:      56px;
}

/* Inverted surface — apply .xt-ink-surface or .ink to a container to flip
   color tokens. Lets the same components live on paper or on ink. */
.xt-ink-surface,
.ink-bg {
  background: var(--xt-ink);
  color: var(--xt-on-ink-fg);
  --xt-ink: var(--xt-on-ink-fg);
  --xt-ink-soft: rgba(246, 244, 238, 0.78);
  --xt-ink-faint: var(--xt-on-ink-faint);
  --xt-rule: var(--xt-on-ink-rule);
  --xt-signal: var(--xt-signal-soft);
}

/* Webfonts — free tier on Google Fonts. Remove if loaded elsewhere. */
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Space+Mono:wght@400;700&display=swap');

/* Defaults — apply Xtory typography to body. Override per product. */
body {
  font-family: var(--xt-font-sans);
  background: var(--xt-paper);
  color: var(--xt-ink);
  font-size: var(--xt-text-base);
  line-height: var(--xt-line-base);
  -webkit-font-smoothing: antialiased;
}