/* ============================================================================
   ULU DESIGN SYSTEM — TOKENS
   The single source of truth for color, type, spacing, radii, shadows, motion.
   Extracted from command.uluteam.com (the Ulu Command Center, 2026 direction).

   Consumed by: command.uluteam.com, ops.uluteam.com, and the client portal.
   Token NAMES match the Command Center so this file is a drop-in there; other
   apps adopt the same names (ops→canonical mapping is in README.md).

   Brand constants (Ulu Team 2026 Style Guide):
     • Deep Red #B32025 leads · Black + White carry weight · warm neutrals support
     • Display = Cormorant Garamond (headings/editorial only)
     • UI/body = Inter (never a display face in labels, buttons, or data)
   ============================================================================ */

:root {
  /* ── Surfaces (light → structural) ───────────────────────────────────── */
  --page: #ffffff;          /* app backdrop; carries the graph-paper grid (see .ulu-grid) */
  --canvas: #fbfaf9;        /* warm paper — recessed fields, input/bubble fills */
  --white: #ffffff;         /* cards, panels, floating surfaces */
  --sand: #f6f4ef;          /* subtle secondary surface */
  --stone: #f2f0ed;         /* toggles, muted chips, neutral fills */
  --hairline: #ece9e4;      /* default border / divider */
  --hairline-warm: #e5d5c3; /* warm border accent (rarely) */

  /* ── Ink ramp (text) ─────────────────────────────────────────────────── */
  --ink: #121212;           /* primary text, headings */
  --charcoal: #343433;      /* strong body / control labels */
  --brown: #474645;         /* secondary body */
  --muted: #7e7e7d;         /* captions, hints, placeholders (meets 4.5:1 on white) */

  /* ── Brand accent ────────────────────────────────────────────────────── */
  --accent: #B32025;        /* Ulu Team Deep Red — primary actions, selection, indicators */
  --accent-hover: #97181D;  /* pressed / hover */
  --accent-wash: #fbecec;   /* tinted accent surface (chips, selected rows) */
  --ember: #ff3e00;         /* warm alt accent — sparing editorial pop */

  /* ── Status / data palette (warm-forward) ────────────────────────────── */
  --grass: #00c978;  --mint: #00ca48;   /* success / on-track / done */
  --honey: #ffbb26;  --gold: #d48f00;   --sun: #ffcd6c;  /* warning / watch / in-progress */
  --alert: #ff2b3a;                      /* danger / blocked */
  --sky: #64c6ff;    --alt-blue: #00b2ff; --app-blue: #0090ff; --link-blue: #0086fc;
  --coral: #ff58ae;  --plum: #9f4fff;

  /* ── Semantic state colors (standardize hover/focus/etc across the system) */
  --focus-ring: var(--accent);
  --success: var(--mint);   --success-ink: #0b7a3e;
  --warning: var(--gold);   --warning-ink: #b07b19;
  --danger: var(--accent);  --danger-ink: var(--accent-hover);
  --info: var(--link-blue);

  /* ── Typography ──────────────────────────────────────────────────────── */
  --font-display: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", "Helvetica Neue", sans-serif;
  --font-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;

  /* fixed rem-anchored scale (product UI: consistent DPI, ~1.2 ratio) */
  --text-xs: 11px;   --text-sm: 12.5px; --text-base: 15px; --text-md: 16px;
  --text-lg: 18px;   --text-xl: 20px;   --text-2xl: 24px;  --text-3xl: 30px;  --text-4xl: 40px;
  --leading-tight: 1.1; --leading-snug: 1.35; --leading-normal: 1.5; --leading-relaxed: 1.65;
  --tracking-kicker: 0.14em; /* uppercase eyebrow/section labels */

  /* ── Spacing (4px base unit) ─────────────────────────────────────────── */
  --space-1: 4px;  --space-2: 8px;  --space-3: 12px; --space-4: 16px;
  --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px;

  /* ── Radii ───────────────────────────────────────────────────────────── */
  --r-small: 2px; --r-badge: 6px; --r-input: 8px; --r-card: 10px;
  --r-nav: 10px;  --r-field: 12px; --r-tile: 14px; --r-icon: 40px;
  --r-button: 9px; --r-pill: 9999px;

  /* ── Shadows (warm ink, low-spread) ──────────────────────────────────── */
  --shadow-xs: 0 1px 2px rgba(18,18,18,0.04);
  --shadow-sm: 0 2px 10px rgba(31,26,21,0.05);
  --shadow-md: 0 4px 14px rgba(18,18,18,0.06);
  --shadow-lg: 0 24px 48px -24px rgba(18,18,18,0.22);

  /* ── Page grid (the command.uluteam.com graph-paper backdrop) ────────── */
  --grid-size: 46px;
  --grid-line-strong: rgba(17,17,17,0.06);  /* horizontals */
  --grid-line-soft: rgba(17,17,17,0.045);   /* verticals */

  /* ── Motion (product: 150–250ms, ease-out, state not decoration) ─────── */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);   /* ease-out-quint */
  --dur-fast: 0.14s; --dur: 0.18s; --dur-slow: 0.24s;

  /* ── Z-index scale (semantic, never magic 9999) ──────────────────────── */
  --z-dropdown: 1000; --z-sticky: 1100; --z-backdrop: 1200;
  --z-modal: 1300;    --z-toast: 1400;  --z-tooltip: 1500;

  /* ── Layout ──────────────────────────────────────────────────────────── */
  --page-max: 1280px; --card-pad: 20px; --sidebar-w: 304px; --sidebar-collapsed: 64px;
}

/* Motion is a state signal, never a gate on content visibility. */
@media (prefers-reduced-motion: reduce) {
  :root { --dur-fast: 0.001ms; --dur: 0.001ms; --dur-slow: 0.001ms; }
}