/* ═══════════════════════════════════════════════════════════════════════════
   DESIGN TOKENS — central typography & color system for the whole site.

   Loaded by every HTML page (index, admin, setup, login, reset-password,
   suspended, swagger). Edit values here to "change over" the look across
   the entire site.

   Reference design spec: Linear-style dark UI.
   - Type scale: 11 / 12 / 13 / 14 / 16 / 20 px
   - Body font: system sans
   - Mono / IDs: JetBrains Mono → SF Mono → Monaco fallback
   - Color palette: dark-first, single accent (--primary)

   Colors are defined at the spec values. The existing dashboard still has
   many hard-coded colors throughout dashboard.css — those migrate to
   var(--…) incrementally as components are touched. New components MUST
   use these tokens.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  /* ─── Font stacks ──────────────────────────────────────────────── */
  --font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'JetBrains Mono', 'SF Mono', 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
  --font-mono-id: var(--font-mono);

  /* ─── Type scale (px, Linear-style) ────────────────────────────── */
  --fs-xs:    11px;  /* IDs, group headers, labels, meta */
  --fs-sm:    12px;  /* sidebar values, comments author, activity */
  --fs-base:  13px;  /* page title, ticket row title, body */
  --fs-md:    14px;  /* description body */
  --fs-lg:    16px;  /* H2 */
  --fs-xl:    20px;  /* H1 */

  /* ─── Weights ──────────────────────────────────────────────────── */
  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;

  /* ─── Letter-spacing ──────────────────────────────────────────── */
  --tracking-tight:   -0.01em;
  --tracking-normal:   0;
  --tracking-wide:     0.05em;
  --tracking-wider:    0.08em;
  --tracking-mono-id: -0.02em;

  /* ─── Line-height ─────────────────────────────────────────────── */
  --lh-tight:   1.25;
  --lh-base:    1.55;
  --lh-relaxed: 1.65;

  /* ─── Color tokens (Linear dark palette) ───────────────────────── */
  --bg:               #0a0a0a;
  --panel:            #12121a;
  --subtle:           #0f0f17;
  --hover:            #16161f;
  --foreground:       #ffffff;
  --muted-foreground: #888888;
  --border:           #2a2a3a;
  --border-subtle:    #232331;
  --primary:          #5b6cff;
  --destructive:      #ef4444;
  --ring:             var(--primary);

  /* ─── Status icon colors ──────────────────────────────────────── */
  --status-planning:     #fa3;
  --status-implementing: #3a8;
  --status-testing:      #a3a;
  --status-staging:      #fa6;
  --status-done:         #5e5;
  --status-cancelled:    #666;
  --status-failed:       #e55;
  --status-blocked:      var(--destructive);

  /* ─── Priority icon colors ────────────────────────────────────── */
  --priority-urgent: var(--destructive);
  --priority-high:   var(--status-staging);
  --priority-medium: var(--status-planning);
  --priority-low:    var(--muted-foreground);

  /* ─── Spacing rhythm (4 / 8 / 12 / 16 / 24) ───────────────────── */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;

  /* ─── Layout ──────────────────────────────────────────────────── */
  --header-height:   44px;
  --row-height:      36px;
  --group-header-h:  28px;
  --left-rail:       200px;
  --right-rail:      260px;
  --sheet-width:     960px;

  /* ─── Transitions ─────────────────────────────────────────────── */
  --transition-colors: color 120ms, background-color 120ms, border-color 120ms;
}

/* ═══════════════════════════════════════════════════════════════════════════
   GLOBAL FONT FEATURES — cv11 + ss01 for cleaner numerals & alt glyphs.
   Inherited by all elements; can be overridden per component if needed.
   ═══════════════════════════════════════════════════════════════════════════ */

html {
  font-feature-settings: 'cv11', 'ss01';
}

/* ═══════════════════════════════════════════════════════════════════════════
   TYPOGRAPHY UTILITY CLASSES
   Use these on new elements. Existing CSS still has its own font-* rules
   and migrates piece-by-piece.
   ═══════════════════════════════════════════════════════════════════════════ */

.font-sans { font-family: var(--font-sans); }
.font-mono { font-family: var(--font-mono); }

/* Monospaced ID — tabular-nums + tighter tracking, for tickets like FEAT-A1B2C3 */
.font-mono-id {
  font-family: var(--font-mono-id);
  font-variant-numeric: tabular-nums;
  letter-spacing: var(--tracking-mono-id);
}

/* Combined ID style: 11px mono, muted, tabular */
.text-id {
  font-family: var(--font-mono-id);
  font-size: var(--fs-xs);
  font-variant-numeric: tabular-nums;
  letter-spacing: var(--tracking-mono-id);
  color: var(--muted-foreground);
}

/* Group header (sticky section labels — uppercase, semibold, wide tracking) */
.text-group-header {
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  color: var(--muted-foreground);
}

/* Sidebar label (uppercase, medium, narrow tracking) */
.text-sidebar-label {
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--muted-foreground);
}

/* Row meta — labels, time, assignee initials */
.text-meta {
  font-size: var(--fs-xs);
  color: var(--muted-foreground);
}

/* Page title (44px header) */
.text-page-title {
  font-size: var(--fs-base);
  font-weight: var(--fw-medium);
}

/* Ticket / row title */
.text-row-title {
  font-size: var(--fs-base);
  font-weight: var(--fw-regular);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Description body (rendered markdown) */
.text-body {
  font-size: var(--fs-md);
  line-height: var(--lh-relaxed);
  font-weight: var(--fw-regular);
}

/* Comment body */
.text-comment {
  font-size: var(--fs-base);
  line-height: var(--lh-base);
}

/* Foreground colors */
.text-foreground        { color: var(--foreground); }
.text-muted-foreground  { color: var(--muted-foreground); }
.text-primary           { color: var(--primary); }
.text-destructive       { color: var(--destructive); }

/* Tabular nums utility (for any numeric column) */
.tabular-nums { font-variant-numeric: tabular-nums; }