/* ============================================================================
   SAIL DESIGN SYSTEM  —  "different yet unified"
   One shared language (accent · type · radius · shadow · spacing · components),
   two surface temperatures so each app keeps its own character:
     · ME / Study Coach  (micro, within-task)  = data-app="me"   → COOL  "focus"
     · SAIL / Planner     (macro, between-task) = data-app="sail" → WARM  "calm"
   ME links this file directly; SAIL mirrors these VALUES in its Tailwind @theme.
   ========================================================================== */
:root{
  /* — shared accent family (one teal-green, bridges the two old values) — */
  --ds-accent:        #159a82;
  --ds-accent-strong: #0f7d6a;
  --ds-accent-soft:   #e4f3ef;
  --ds-warm:          #e0875a;   /* secondary warm, used sparingly (shared) */
  --ds-good:#159a82; --ds-warn:#d98c00; --ds-bad:#e0503a;

  /* — neutral ramp (temperature set per-app below) — */
  --ds-ink:    #221f1c;
  --ds-muted:  #6f6a64;
  --ds-line:   #e7e4df;
  --ds-canvas: #ffffff;   /* page */
  --ds-surface:#ffffff;   /* card */
  --ds-userbg: #f3f2f0;

  /* — shared type system — */
  --ds-font-display: 'Space Grotesk', system-ui, -apple-system, sans-serif;
  --ds-font-sans:    'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;

  /* — shared radii / shadow / spacing — */
  --ds-r-sm:10px; --ds-r:14px; --ds-r-lg:18px; --ds-r-pill:999px;
  --ds-shadow-1: 0 1px 2px rgba(34,31,28,.05), 0 6px 18px rgba(34,31,28,.04);
  --ds-shadow-2: 0 4px 12px rgba(34,31,28,.08), 0 18px 40px rgba(34,31,28,.06);
  --ds-s1:6px; --ds-s2:10px; --ds-s3:16px; --ds-s4:24px;
}

/* ME = cool "focus": near-white, slightly cooler neutrals */
[data-app="me"]{
  --ds-canvas:#fcfdfd; --ds-surface:#ffffff; --ds-userbg:#f4f5f6;
  --ds-line:#e8eaea; --ds-ink:#1b1d1d; --ds-muted:#677072;
}
/* SAIL = warm "calm": cream canvas, warm soft-dark ink, cozy surfaces */
[data-app="sail"]{
  --ds-canvas:#f6f4ee; --ds-surface:#fffdf8; --ds-userbg:#efece4;
  --ds-line:#e7e2d8; --ds-ink:#2f2b27; --ds-muted:#7a746c;
}

/* ── shared component primitives (same DNA in both apps) ── */
.ds-logo{ width:28px; height:28px; border-radius:9px; display:flex; align-items:center; justify-content:center;
  color:#fff; font:700 14px/1 var(--ds-font-display); background:linear-gradient(140deg, var(--ds-accent), #2bbf9f); box-shadow:var(--ds-shadow-1); }
.ds-card{ background:var(--ds-surface); border:1px solid var(--ds-line); border-radius:var(--ds-r-lg); box-shadow:var(--ds-shadow-1); }
.ds-btn{ border-radius:var(--ds-r-sm); padding:8px 15px; font:600 14px var(--ds-font-sans); border:1px solid var(--ds-line); background:var(--ds-surface); color:var(--ds-ink); cursor:pointer; }
.ds-btn--primary{ background:var(--ds-accent); border-color:var(--ds-accent); color:#fff; }
.ds-btn--primary:hover{ background:var(--ds-accent-strong); }
.ds-chip{ display:inline-flex; align-items:center; gap:6px; font:600 12px var(--ds-font-sans); color:var(--ds-muted);
  border:1px solid var(--ds-line); border-radius:var(--ds-r-pill); padding:3px 10px; background:var(--ds-surface); }
/* the unifying family badge: shows which app you're in, same shape both sides */
.ds-app-tag{ font:600 11px var(--ds-font-sans); letter-spacing:.02em; color:var(--ds-accent-strong);
  background:var(--ds-accent-soft); border-radius:var(--ds-r-pill); padding:2px 9px; }