/* ═══════════════════════════════════════════════════════════════
   JARVIS — COLOR TOKENS
   Petrol Blue (structure) × Accent Orange (action), dark-mode native.
   Base scales + semantic aliases.
   ═══════════════════════════════════════════════════════════════ */
:root {
  /* ── Petrol Blue — primary scale ───────────────────────────── */
  --petrol-50:  #E2EEF3;
  --petrol-100: #B6D4E1;
  --petrol-200: #85B6CC;
  --petrol-300: #5496B3;
  --petrol-400: #30799A;
  --petrol-500: #145E80;
  --petrol-600: #104E6B;
  --petrol-700: #0C3F57;
  --petrol-800: #083144;
  --petrol-900: #052332;
  --petrol-950: #031820;

  /* ── Accent Orange — action & energy ───────────────────────── */
  --accent-50:  #FFF5EB;
  --accent-100: #FFE5CC;
  --accent-200: #FFCC99;
  --accent-300: #FFB266;
  --accent-400: #FF9933;
  --accent-500: #FF8000;
  --accent-600: #E67300;
  --accent-700: #CC6600;
  --accent-800: #995200;
  --accent-900: #663700;

  /* ── Status colors ─────────────────────────────────────────── */
  --status-success:     #10B981;
  --status-success-bg:  rgba(16, 185, 129, 0.15);
  --status-error:       #EF4444;
  --status-error-bg:    rgba(239, 68, 68, 0.15);
  --status-warning:     #FF8000;
  --status-warning-bg:  rgba(255, 128, 0, 0.15);
  --status-info:        #5496B3;
  --status-info-bg:     rgba(84, 150, 179, 0.15);

  /* ── Dark-mode surfaces ────────────────────────────────────── */
  --surface-primary:   #091318;
  --surface-secondary: #0E1B22;
  --surface-tertiary:  #13232C;
  --surface-hover:     #182E3A;
  --surface-border:    #2A4556;

  /* ── Text on dark ──────────────────────────────────────────── */
  --text-primary:   #E2EEF3;
  --text-secondary: #7BB8D0;
  --text-tertiary:  #4A9AB5;
  --text-muted:     #3D7A92;

  /* ── Phase colors (Gantt / timeline) ───────────────────────── */
  --phase-0: #2563EB;
  --phase-1: #7C3AED;
  --phase-2: #DB2777;
  --phase-3: #EA580C;
  --phase-4: #16A34A;
  --phase-5: #0891B2;
  --phase-6: #4F46E5;
  --phase-7: #9333EA;

  /* ── Avatar palette (deterministic member colors) ──────────── */
  --avatar-1: #6366F1;
  --avatar-2: #EC4899;
  --avatar-3: #14B8A6;
  --avatar-4: #F59E0B;
  --avatar-5: #FF8000;

  /* ── Sinapse brand (editorial / social world) ──────────────── */
  --brand-cobalt: #2E37C8;   /* deep cobalt blue of social posts */
  --brand-red:    #F04E23;   /* poster red / orange accent */
  --brand-navy:   #16233A;   /* logo navy */
  --brand-steel:  #93A6B5;   /* logo steel-grey */
  --brand-paper:  #ECECEC;   /* newsprint background */

  /* ── Semantic aliases ──────────────────────────────────────── */
  --bg-app:        var(--surface-primary);
  --bg-surface:    var(--surface-secondary);
  --bg-raised:     var(--surface-tertiary);
  --bg-hover:      var(--surface-hover);
  --border-default: var(--surface-border);
  --border-strong:  var(--petrol-400);

  --fg-default:    var(--text-primary);
  --fg-muted:      var(--text-secondary);
  --fg-subtle:     var(--text-tertiary);
  --fg-faint:      var(--text-muted);

  --action:        var(--accent-500);
  --action-hover:  var(--accent-600);
  --action-fg:     #FFFFFF;
  --focus-ring:    rgba(255, 128, 0, 0.15);
}