/* ============================================================================
   Shared Design System — tokens (v1, Nov 13, 2026)
   One Apple-grade system for Orlo + AICrew. Canonical source:
   ~/workspace/ai-business-lineup/design-system/ — products copy these files
   into their app tree at build time; edit HERE, never in a product copy.

   Typography stack is the desks' locked stack, verbatim (program §5).
   ========================================================================== */

:root{
  /* ---- Type ---- */
  --ds-font: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Helvetica Neue", Inter, "Segoe UI", Roboto, Arial, sans-serif;
  --ds-font-text: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Inter, "Segoe UI", Roboto, Arial, sans-serif;
  --ds-font-display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Helvetica Neue", Inter, "Segoe UI", Roboto, Arial, sans-serif;
  --ds-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* Type scale — one scale per role, applied consistently.
     Display cut (headings 20px+) uses --ds-font-display + tight tracking. */
  --ds-text-caption: 12.5px;
  --ds-text-footnote: 13.5px;
  --ds-text-body: 15px;
  --ds-text-callout: 16px;
  --ds-text-headline: 17px;
  --ds-text-title3: 20px;
  --ds-text-title2: 24px;
  --ds-text-title1: 30px;
  --ds-tracking-display: -0.02em;
  --ds-leading-body: 1.55;
  --ds-leading-tight: 1.25;

  /* ---- Motion — spring-eased, no hard cuts ---- */
  --ds-spring: cubic-bezier(0.32, 0.72, 0, 1);          /* iOS sheet/spring feel */
  --ds-spring-soft: cubic-bezier(0.25, 0.9, 0.3, 1);
  --ds-ease-out: cubic-bezier(0.2, 0.7, 0.2, 1);
  --ds-dur-instant: 120ms;   /* tap feedback */
  --ds-dur-fast: 180ms;
  --ds-dur-sheet: 340ms;     /* sliding sheets */
  --ds-dur-view: 260ms;      /* view changes */

  /* ---- Shape & space ---- */
  --ds-radius: 18px;
  --ds-radius-sm: 12px;
  --ds-radius-sheet: 22px;
  --ds-space-1: 4px;
  --ds-space-2: 8px;
  --ds-space-3: 12px;
  --ds-space-4: 16px;
  --ds-space-5: 24px;
  --ds-space-6: 32px;
  --ds-touch: 44px;          /* minimum touch target — never smaller */

  /* ---- Neutral palette (shared) ---- */
  --ds-bg: #ffffff;
  --ds-bg-soft: #f6f6f8;
  --ds-bg-elev: #ffffff;
  --ds-text: #17171c;
  --ds-text-soft: #5c5c66;
  --ds-text-faint: #9a9aa5;
  --ds-line: #e7e7ec;
  --ds-line-soft: #efeff3;
  --ds-danger: #d64545;
  --ds-danger-bg: #fdf0f0;
  --ds-danger-line: #f3caca;
  --ds-danger-text: #a12c2c;
  --ds-warn-bg: #fff8e6;
  --ds-warn-line: #f0dfa8;
  --ds-warn-text: #7a5c00;
  --ds-ok: #1f9d66;
  --ds-ok-bg: #e9f7f0;
  --ds-overdue: #c22f2f;
  --ds-overdue-bg: #fdf0f0;
  --ds-shadow: 0 12px 40px rgba(20, 16, 60, .14);
  --ds-shadow-sheet: 0 -12px 44px rgba(10, 10, 20, .18);

  /* ---- Per-product accent tokens (same components, product skin) ---- */
  /* Orlo: current purple is the DEMO PLACEHOLDER, pending the owner's
     identity pick (program §9.10). Token name is stable; value may change. */
  --orlo-accent: #6C5CE7;
  --orlo-accent-2: #8B7CF0;
  /* AICrew console: PROVISIONAL slate, pending the owner's identity pick. */
  --aicrew-accent: #33566e;
  --aicrew-accent-2: #4d7a99;

  /* The consuming product sets --accent / --accent-2 from its tokens. */
  --accent: var(--orlo-accent);
  --accent-2: var(--orlo-accent-2);
}

[data-theme="dark"]{
  --ds-bg: #101014;
  --ds-bg-soft: #17171d;
  --ds-bg-elev: #1c1c23;
  --ds-text: #f2f2f5;
  --ds-text-soft: #a8a8b3;
  --ds-text-faint: #6e6e7a;
  --ds-line: #282832;
  --ds-line-soft: #22222b;
  --ds-danger-bg: #2a1518;
  --ds-danger-line: #4a2226;
  --ds-danger-text: #f0a3a3;
  --ds-warn-bg: #2a2410;
  --ds-warn-line: #4d421c;
  --ds-warn-text: #ecd28a;
  --ds-ok-bg: #122b20;
  --ds-overdue-bg: #2a1518;
  --ds-shadow: 0 12px 40px rgba(0, 0, 0, .5);
  --ds-shadow-sheet: 0 -12px 44px rgba(0, 0, 0, .55);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]):not([data-theme="dark"]){
    --ds-bg: #101014;
    --ds-bg-soft: #17171d;
    --ds-bg-elev: #1c1c23;
    --ds-text: #f2f2f5;
    --ds-text-soft: #a8a8b3;
    --ds-text-faint: #6e6e7a;
    --ds-line: #282832;
    --ds-line-soft: #22222b;
    --ds-danger-bg: #2a1518;
    --ds-danger-line: #4a2226;
    --ds-danger-text: #f0a3a3;
    --ds-warn-bg: #2a2410;
    --ds-warn-line: #4d421c;
    --ds-warn-text: #ecd28a;
    --ds-ok-bg: #122b20;
    --ds-overdue-bg: #2a1518;
    --ds-shadow: 0 12px 40px rgba(0, 0, 0, .5);
    --ds-shadow-sheet: 0 -12px 44px rgba(0, 0, 0, .55);
  }
}

/* ---- Type utilities ---- */
.ds-display{ font-family: var(--ds-font-display); letter-spacing: var(--ds-tracking-display); font-weight: 800; }
.ds-title{ font-family: var(--ds-font-display); letter-spacing: var(--ds-tracking-display); font-weight: 700; }
.ds-num{ font-variant-numeric: tabular-nums; }  /* prices, deadlines, counts — always */
.ds-body{ font-family: var(--ds-font-text); font-size: var(--ds-text-body); line-height: var(--ds-leading-body); }