/*
 * SRVU Design Tokens — canonical design system variables.
 *
 * Source of truth for color, type, radius, shadow, motion across every SRVU
 * product. When this file changes, every product that imports it inherits the
 * change automatically. Per FIELD-MANUAL.md §4 and §5.0.3.
 *
 * Import via:
 *   <link rel="stylesheet" href="/packages/design-tokens/tokens.css">
 * Or in a bundler:
 *   @import "@srvu/design-tokens/tokens.css";
 *
 * Do NOT inline these values in product code. Reference them via var(--*).
 * If a product needs a new token, add it here — not locally.
 */

:root {
  /* ── Backgrounds — true black (no gray-wash) ── */
  --bg:            #0a0a0e;
  --card:          #111116;
  --card-hover:    #18181e;
  --border:        #1e1e26;
  --border-light:  #2a2a34;

  /* ── Text — clean white, not gray-washed ── */
  --text:          #e8e8ed;
  --text-muted:    #8a8a96;
  --text-dim:      #4a4a56;

  /* ── Primary — pink ── */
  --accent:        #e84393;
  --accent-hover:  #d63384;
  --accent-dim:    rgba(232, 67, 147, 0.12);

  /* ── Secondary — gold ── */
  --gold:          #c9a84c;
  --gold-hover:    #b8972f;
  --gold-dim:      rgba(201, 168, 76, 0.12);

  /* ── Semantic ── */
  --danger:        #e05c5c;
  --danger-dim:    rgba(224, 92, 92, 0.10);
  --success:       #4caf82;
  --success-dim:   rgba(76, 175, 130, 0.10);
  --warning:       #e0a84c;
  --warning-dim:   rgba(224, 168, 76, 0.10);

  /* ── Status ── */
  --todo:          #8a8a96;
  --in-progress:   #e84393;
  --done:          #4caf82;
  --critical:      #e05c5c;
  --high:          #e0724c;
  --medium:        #e0a84c;
  --low:           #5b8dee;

  /* ── Layout — radius, shadow, type ── */
  --radius:        8px;
  --radius-lg:     12px;
  --radius-sm:     4px;
  --shadow:        0 2px 8px rgba(0, 0, 0, 0.4);
  --shadow-lg:     0 8px 32px rgba(0, 0, 0, 0.6);

  /* ── Typography ── */
  --font:          'Figtree', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --mono:          'SF Mono', 'Fira Code', 'Fira Mono', 'Roboto Mono', monospace;

  /* ── Motion ── */
  --transition:    150ms ease;
  --transition-slow: 400ms ease;
}

/* ── Reduced motion ── */
@media (prefers-reduced-motion: reduce) {
  :root {
    --transition:  0ms;
    --transition-slow: 0ms;
  }
}

/* ── Scrollbar (shared, opt-in per product) ── */
.srvu-scrollbar::-webkit-scrollbar { width: 6px; height: 6px; }
.srvu-scrollbar::-webkit-scrollbar-track { background: transparent; }
.srvu-scrollbar::-webkit-scrollbar-thumb {
  background: var(--border);
  border-radius: 3px;
}
.srvu-scrollbar::-webkit-scrollbar-thumb:hover { background: var(--border-light); }

/* ── Focus — always visible, always pink, always 2px ── */
.srvu-focus :focus-visible,
.srvu-focus:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}